// // Basic Bootstrap table // .table { width: 100%; max-width: 100%; background-color: $table-background-color; // Reset for nesting within parents with `background-color`. & > thead > tr > th { text-align: left; vertical-align: bottom; border-bottom: (2 * $table-border-width) solid $table-border-color; } & > thead > tr > th, & > tbody > tr > td, & > tfoot > tr > td { padding: 0.75 * $font-size-base; vertical-align: top; border-top: $table-border-width solid $table-border-color; } } .table-unstyled { width: 100%; max-width: 100%; background-color: transparent; td, th{ border-top: 0; border-bottom: 0; text-align: left; } } // // Condensed table w/ half padding // .table-sm { & > thead > tr > th, & > tbody > tr > td, & > tfoot > tr > td { padding: 0.3 * $font-size-base;; } } // Bordered version // // Add borders all around the table and between all the columns. .table-bordered { border: $table-border-width solid $table-border-color; & > thead > tr > th, & > tbody > tr > td, & > tfoot > tr > td { border: $table-border-width solid $table-border-color; } & > thead { & > tr > th, & > tr > td { border-bottom-width: (2 * $table-border-width); } } } // Zebra-striping // // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { & > tbody > tr:nth-of-type(odd) { background-color: $table-accent-bg; } } // Table backgrounds // // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. @each $color, $value in $theme-colors { .table-#{$color} { &, > th, > td { background-color: lighten($value, 40%); } } } // Dark styles // // Same table markup, but inverted color scheme: dark background and light text. .thead-dark { th { color: $white; background-color: $gray-900; } } .thead-light { th { color: $gray-700; background-color: $gray-200; } } .table-dark { color: $white; background-color: $gray-900; & > thead > tr > th, & > tbody > tr > td, & > tfoot > tr > td { border-color: #32383e; } &.table-bordered { border: 0; } &.table-striped { & > tbody > tr:nth-of-type(odd) { background-color: #2c3034; } } }