Add zebra striping for table columns

Co-Authored-By: Macallan Camara <[email protected]>
Co-Authored-By: XhmikosR <[email protected]>

2 files changed, 10 insertions, 0 deletions

diff --git a/scss/_tables.scss b/scss/_tables.scss
index 30e898b58..204511104 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 7b128833f..0485ffe7c 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;