2 // Basic Bootstrap table
7 margin-bottom: $spacer;
9 background-color: $table-bg; // Reset for nesting within parents with `background-color`.
13 padding: $table-cell-padding;
15 border-top: $table-border-width solid $table-border-color;
19 vertical-align: bottom;
20 border-bottom: (2 * $table-border-width) solid $table-border-color;
24 border-top: (2 * $table-border-width) solid $table-border-color;
30 // Condensed table w/ half padding
36 padding: $table-cell-padding-sm;
43 // Add or remove borders all around the table and between all the columns.
46 border: $table-border-width solid $table-border-color;
50 border: $table-border-width solid $table-border-color;
56 border-bottom-width: 2 * $table-border-width;
72 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
75 tbody tr:nth-of-type(#{$table-striped-order}) {
76 background-color: $table-accent-bg;
83 // Placed here since it has to come after the potential zebra striping
88 color: $table-hover-color;
89 background-color: $table-hover-bg;
97 // Exact selectors below required to override `.table-striped` and prevent
98 // inheritance to nested tables.
100 @each $color, $value in $theme-colors {
101 @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
104 @include table-row-variant(active, $table-active-bg);
109 // Same table markup, but inverted color scheme: dark background and light text.
111 // stylelint-disable-next-line no-duplicate-selectors
115 color: $table-dark-color;
116 background-color: $table-dark-bg;
117 border-color: $table-dark-border-color;
123 color: $table-head-color;
124 background-color: $table-head-bg;
125 border-color: $table-border-color;
131 color: $table-dark-color;
132 background-color: $table-dark-bg;
137 border-color: $table-dark-border-color;
145 tbody tr:nth-of-type(#{$table-striped-order}) {
146 background-color: $table-dark-accent-bg;
153 color: $table-dark-hover-color;
154 background-color: $table-dark-hover-bg;
163 // Generate series of `.table-responsive-*` classes for configuring the screen
164 // size of where your table will overflow.
167 @each $breakpoint in map-keys($grid-breakpoints) {
168 $next: breakpoint-next($breakpoint, $grid-breakpoints);
169 $infix: breakpoint-infix($next, $grid-breakpoints);
172 @include media-breakpoint-down($breakpoint) {
176 -webkit-overflow-scrolling: touch;
178 // Prevent double border on horizontal scroll due to use of `display: block;`