scss/bootstrap/_tables.scss

0001 //
0002 // Basic Bootstrap table
0003 //
0004
0005 .table {
0006   --#{$variable-prefix}table-bg: #{$table-bg};
0007   --#{$variable-prefix}table-striped-color: #{$table-striped-color};
0008   --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
0009   --#{$variable-prefix}table-active-color: #{$table-active-color};
0010   --#{$variable-prefix}table-active-bg: #{$table-active-bg};
0011   --#{$variable-prefix}table-hover-color: #{$table-hover-color};
0012   --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
0013
0014   width: 100%;
0015   margin-bottom: $spacer;
0016   color: $table-color;
0017   vertical-align: $table-cell-vertical-align;
0018   border-color: $table-border-color;
0019
0020   // Target th & td
0021   // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
0022   // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
0023   // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
0024   // stylelint-disable-next-line selector-max-universal
0025   > :not(caption) > * > * {
0026     padding: $table-cell-padding-y $table-cell-padding-x;
0027     background-color: var(--#{$variable-prefix}table-bg);
0028     background-image: linear-gradient(var(--#{$variable-prefix}table-accent-bg), var(--#{$variable-prefix}table-accent-bg));
0029     border-bottom-width: $table-border-width;
0030   }
0031
0032   > tbody {
0033     vertical-align: inherit;
0034   }
0035
0036   > thead {
0037     vertical-align: bottom;
0038   }
0039
0040   // Highlight border color between thead, tbody and tfoot.
0041   > :not(:last-child) > :last-child > * {
0042     border-bottom-color: $table-group-separator-color;
0043   }
0044 }
0045
0046
0047 //
0048 // Change placement of captions with a class
0049 //
0050
0051 .caption-top {
0052   caption-side: top;
0053 }
0054
0055
0056 //
0057 // Condensed table w/ half padding
0058 //
0059
0060 .table-sm {
0061   // stylelint-disable-next-line selector-max-universal
0062   > :not(caption) > * > * {
0063     padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
0064   }
0065 }
0066
0067
0068 // Border versions
0069 //
0070 // Add or remove borders all around the table and between all the columns.
0071 //
0072 // When borders are added on all sides of the cells, the corners can render odd when
0073 // these borders do not have the same color or if they are semi-transparent.
0074 // Therefor we add top and border bottoms to the `tr`s and left and right borders
0075 // to the `td`s or `th`s
0076
0077 .table-bordered {
0078   > :not(caption) > * {
0079     border-width: $table-border-width 0;
0080
0081     // stylelint-disable-next-line selector-max-universal
0082     > * {
0083       border-width: 0 $table-border-width;
0084     }
0085   }
0086 }
0087
0088 .table-borderless {
0089   // stylelint-disable-next-line selector-max-universal
0090   > :not(caption) > * > * {
0091     border-bottom-width: 0;
0092   }
0093 }
0094
0095 // Zebra-striping
0096 //
0097 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
0098
0099 .table-striped {
0100   > tbody > tr:nth-of-type(#{$table-striped-order}) {
0101     --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
0102     color: var(--#{$variable-prefix}table-striped-color);
0103   }
0104 }
0105
0106 // Active table
0107 //
0108 // The `.table-active` class can be added to highlight rows or cells
0109
0110 .table-active {
0111   --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
0112   color: var(--#{$variable-prefix}table-active-color);
0113 }
0114
0115 // Hover effect
0116 //
0117 // Placed here since it has to come after the potential zebra striping
0118
0119 .table-hover {
0120   > tbody > tr:hover {
0121     --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
0122     color: var(--#{$variable-prefix}table-hover-color);
0123   }
0124 }
0125
0126
0127 // Table variants
0128 //
0129 // Table variants set the table cell backgrounds, border colors
0130 // and the colors of the striped, hovered & active tables
0131
0132 @each $color, $value in $table-variants {
0133   @include table-variant($color, $value);
0134 }
0135
0136 // Responsive tables
0137 //
0138 // Generate series of `.table-responsive-*` classes for configuring the screen
0139 // size of where your table will overflow.
0140
0141 @each $breakpoint in map-keys($grid-breakpoints) {
0142   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
0143
0144   @include media-breakpoint-down($breakpoint) {
0145     .table-responsive#{$infix} {
0146       overflow-x: auto;
0147       -webkit-overflow-scrolling: touch;
0148     }
0149   }
0150 }