diff --git a/scss/_tables.scss b/scss/_tables.scss index 30e898b580..2045111043 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -103,6 +103,7 @@ // // Default zebra-stripe styles (alternating gray and transparent backgrounds) +// For rows .table-striped { > tbody > tr:nth-of-type(#{$table-striped-order}) > * { --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); @@ -110,6 +111,14 @@ } } +// For columns +.table-striped-columns { + > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { + --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); + color: var(--#{$variable-prefix}table-striped-color); + } +} + // Active table // // The `.table-active` class can be added to highlight rows or cells diff --git a/scss/_variables.scss b/scss/_variables.scss index 7b128833ff..0485ffe7c5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -676,6 +676,7 @@ $table-border-width: $border-width !default; $table-border-color: $border-color !default; $table-striped-order: odd !default; +$table-striped-columns-order: even !default; $table-group-separator-color: currentColor !default; diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md index 645145ba4c..88f9157621 100644 --- a/site/content/docs/5.1/content/tables.md +++ b/site/content/docs/5.1/content/tables.md @@ -80,12 +80,22 @@ Use `.table-striped` to add zebra-striping to any table row within the `` {{< table class="table table-striped" >}} +### Striped columns + +Use `.table-striped-columns` to add zebra-striping to any table column. + +{{< table class="table table-striped-columns" >}} + These classes can also be added to table variants: {{< table class="table table-dark table-striped" >}} +{{< table class="table table-dark table-striped-columns" >}} + {{< table class="table table-success table-striped" >}} +{{< table class="table table-success table-striped-columns" >}} + ### Hoverable rows Add `.table-hover` to enable a hover state on table rows within a ``. @@ -94,7 +104,7 @@ Add `.table-hover` to enable a hover state on table rows within a ``. {{< table class="table table-dark table-hover" >}} -These hoverable rows can also be combined with the striped variant: +These hoverable rows can also be combined with the striped rows variant: {{< table class="table table-striped table-hover" >}} @@ -210,11 +220,11 @@ Highlight a table row or cell by adding a `.table-active` class. ## How do the variants and accented tables work? -For the accented tables ([striped rows](#striped-rows), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): +For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds. - Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow. -- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. +- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color. - Text and border colors are generated the same way, and their colors are inherited by default.