Add zebra striping for table columns

Co-Authored-By: Macallan Camara <44030647+Macinto5h@users.noreply.github.com>
Co-Authored-By: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_tables.scss b/scss/_tables.scss
index 30e898b580a441c5e237bd3cef14cb9575b9a409..2045111043a45b81580825933be4908121263518 100644 (file)
--- 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 7b128833ffda55f24d4a92fa55dff458932d8ae3..0485ffe7c55be6747651abfd733418cd777fbff5 100644 (file)
--- 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 645145ba4cc8b87ebfa36dc8488b6c07c52bebe8..88f91576211a9bb6bec8b149fef1f506e9ace81e 100644 (file)
--- 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 `<tbody>`
 
 {{< 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 `<tbody>`.
@@ -94,7 +104,7 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 
 {{< 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.