Created by: MartijnCuppens
Prevent nested table style leaks by using children combinators and CSS custom properties:
- Change in reboot: inherit border color and set border style to solid to make it easier to change borders. Border width is still 0, so no borders are visible by default.
- The only way to get the colors right is by only colorizing the
td
andth
backgrounds, therefore we need to work with CSS custom properties. - Stole the background image hack from @mdo in https://github.com/twbs/bootstrap/pull/30342
- All table variants are now stored in
$table-variants
. This way we have more control over colorizing tables. The dark table is also a variant now.-
$table-border-factor
will determine the contrast between the background and the borders -
$table-accent-bg-factor
will determine the contrast between the background and striped rows -
$table-hover-bg-factor
will determine the contrast between the background and hovered rows - The color of the text will be determined by
contrast-color()
-
- Simplified the docs a little
- Stored the table content in a partial, which is easier to reuse
- Only kept the whole html for the first example, stripped some html in the other examples (inspired by the modal docs change)
TODO:
-
Document BCs in migration guide -
Update partial template (see https://github.com/twbs/bootstrap/pull/30466#pullrequestreview-382820120) -
The docs might need some adjustments -
Cleanup git if feedback Tweaks are applied -
Have a look at what tickets can be closed by this
Preview: https://deploy-preview-30466--twbs-bootstrap.netlify.com/docs/4.3/content/tables/
- Fixes https://github.com/twbs/bootstrap/issues/29244, background issues are fixed
- Fixes #30251, fixes https://github.com/twbs/bootstrap/issues/27800, nested tables styles are reset
- Fixes https://github.com/twbs/bootstrap/issues/24529,
active
is now a state and can be applied to any table variant - Fixes https://github.com/twbs/bootstrap/issues/27879,
table-dark
is a table variant now - Fixes https://github.com/twbs/bootstrap/issues/28160, hoverable rows work on any table variant
- Fixes https://github.com/twbs/bootstrap/issues/25675, correct colors are applied to the table variants
- Fixes https://github.com/twbs/bootstrap/issues/29290, table variant classes can be added to table,thead,tbody,tfoot,tr,th and td.
- Closes #30342