_tables.scss 3.36 KiB
//
// Basic Bootstrap table
//
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: $spacer;
  th,
  td {
    padding: $table-cell-padding;
    line-height: $line-height;
    vertical-align: top;
    border-top: $table-border-width solid $table-border-color;
  thead th {
    vertical-align: bottom;
    border-bottom: (2 * $table-border-width) solid $table-border-color;
  tbody + tbody {
    border-top: (2 * $table-border-width) solid $table-border-color;
  .table {
    background-color: $body-bg;
// Condensed table w/ half padding
.table-sm {
  th,
  td {
    padding: $table-sm-cell-padding;
// Bordered version
// Add borders all around the table and between all the columns.
.table-bordered {
  border: $table-border-width solid $table-border-color;
  th,
  td {
    border: $table-border-width solid $table-border-color;
  thead {
    th,
    td {
      border-bottom-width: (2 * $table-border-width);
// Zebra-striping
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
tbody tr:nth-of-type(odd) { background-color: $table-bg-accent; } } // Hover effect // // Placed here since it has to come after the potential zebra striping .table-hover { tbody tr { @include hover { background-color: $table-bg-hover; } } } // Table backgrounds // // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. // Generate the contextual variants @include table-row-variant(active, $table-bg-active); @include table-row-variant(success, $state-success-bg); @include table-row-variant(info, $state-info-bg); @include table-row-variant(warning, $state-warning-bg); @include table-row-variant(danger, $state-danger-bg); // Responsive tables // // Wrap your tables in `.table-responsive` and we'll make them mobile friendly // by enabling horizontal scrolling. Only applies <768px. Everything above that // will display normally. .table-responsive { display: block; width: 100%; min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) overflow-x: auto; // TODO: find out if we need this still. // // border: $table-border-width solid $table-border-color; // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 } .thead-inverse { th { color: #fff; background-color: $gray-dark; } } .thead-default { th { color: $gray; background-color: $gray-lighter; } } .table-inverse { color: $gray-lighter; background-color: $gray-dark; &.table-bordered { border: 0;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
} th, td, thead th { border-color: $gray; } } .table-reflow { thead { float: left; } tbody { display: block; white-space: nowrap; } th, td { border-top: $table-border-width solid $table-border-color; border-left: $table-border-width solid $table-border-color; &:last-child { border-right: $table-border-width solid $table-border-color; } } thead, tbody, tfoot { &:last-child { tr:last-child { th, td { border-bottom: $table-border-width solid $table-border-color; } } } } tr { float: left; th, td { display: block !important; border: $table-border-width solid $table-border-color; } } }