Use box shadows instead of linear gradients to colorize tables

[MartijnCuppens]

Closes #32266

Before: https://codepen.io/MartijnCuppens/pen/oNzxwZY
After: https://codepen.io/MartijnCuppens/pen/PoGNjpQ

Scroll fast to see the effect. Effect most noticeable in Safari & Chrome.

[septatrix]

For me this only improves the experience marginally (Samsung Galaxy A51, Chrome 86) but the white unrendered sections are still very noticeable.

[septatrix]

I may be missing something but why is it not possible to just set the --bs-table-bg as the background on the <table> element and just have the child elements use --bs-table-accent-bg as the normal background?

[MartijnCuppens]

I may be missing something but why is it not possible to just set the --bs-table-bg as the background on the <table> element and just have the child elements use --bs-table-accent-bg as the normal background?

We use this technique so we can mix the striped/active/hover tables with our table variants https://getbootstrap.com/docs/5.0/content/tables/#variants

[septatrix]

Okay I did not even realize this is now possible with v5, that sounds great. I guess some :before/:after trickery was already considered as does not work for some reason?

[mdo]

Very noticeable difference on Safari. Wondering if we need a full 9999px or if we could get away with something smaller?

[MartijnCuppens]

Very noticeable difference on Safari. Wondering if we need a full 9999px or if we could get away with something smaller?

I used 9999px because it was also used in our CSS for .modal-scrollbar-measure. It 'll always be some kind of magic number and the lower we go, the more chance we run into issues.

[ihorzenich]

I may be missing something but why is it not possible to just set the --bs-table-bg as the background on the <table> element and just have the child elements use --bs-table-accent-bg as the normal background?

We use this technique so we can mix the striped/active/hover tables with our table variants https://getbootstrap.com/docs/5.0/content/tables/#variants

Wouldn't the same visual effect be achieved by using these variables directly in background-color instead?
I'm wondering why box-shadow is necessary in this case.

I tested it by simply replacing
background-color: var(--bs-table-bg);
with
background-color: var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
and it seemed to work as expected.