src/scss/bootstrap-4.0.0-alpha.6/scss/_tables.scss

   1 //
   2 // Basic Bootstrap table
   3 //
   4
   5 .table {
   6   width: 100%;
   7   max-width: 100%;
   8   margin-bottom: $spacer;
   9
  10   th,
  11   td {
  12     padding: $table-cell-padding;
  13     vertical-align: top;
  14     border-top: $table-border-width solid $table-border-color;
  15   }
  16
  17   thead th {
  18     vertical-align: bottom;
  19     border-bottom: (2 * $table-border-width) solid $table-border-color;
  20   }
  21
  22   tbody + tbody {
  23     border-top: (2 * $table-border-width) solid $table-border-color;
  24   }
  25
  26   .table {
  27     background-color: $body-bg;
  28   }
  29 }
  30
  31
  32 //
  33 // Condensed table w/ half padding
  34 //
  35
  36 .table-sm {
  37   th,
  38   td {
  39     padding: $table-sm-cell-padding;
  40   }
  41 }
  42
  43
  44 // Bordered version
  45 //
  46 // Add borders all around the table and between all the columns.
  47
  48 .table-bordered {
  49   border: $table-border-width solid $table-border-color;
  50
  51   th,
  52   td {
  53     border: $table-border-width solid $table-border-color;
  54   }
  55
  56   thead {
  57     th,
  58     td {
  59       border-bottom-width: (2 * $table-border-width);
  60     }
  61   }
  62 }
  63
  64
  65 // Zebra-striping
  66 //
  67 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  68
  69 .table-striped {
  70   tbody tr:nth-of-type(odd) {
  71     background-color: $table-bg-accent;
  72   }
  73 }
  74
  75
  76 // Hover effect
  77 //
  78 // Placed here since it has to come after the potential zebra striping
  79
  80 .table-hover {
  81   tbody tr {
  82     @include hover {
  83       background-color: $table-bg-hover;
  84     }
  85   }
  86 }
  87
  88
  89 // Table backgrounds
  90 //
  91 // Exact selectors below required to override `.table-striped` and prevent
  92 // inheritance to nested tables.
  93
  94 // Generate the contextual variants
  95 @include table-row-variant(active, $table-bg-active);
  96 @include table-row-variant(success, $state-success-bg);
  97 @include table-row-variant(info, $state-info-bg);
  98 @include table-row-variant(warning, $state-warning-bg);
  99 @include table-row-variant(danger, $state-danger-bg);
 100
 101
 102 // Inverse styles
 103 //
 104 // Same table markup, but inverted color scheme: dark background and light text.
 105
 106 .thead-inverse {
 107   th {
 108     color: $table-inverse-color;
 109     background-color: $table-inverse-bg;
 110   }
 111 }
 112
 113 .thead-default {
 114   th {
 115     color: $table-head-color;
 116     background-color: $table-head-bg;
 117   }
 118 }
 119
 120 .table-inverse {
 121   color: $table-inverse-color;
 122   background-color: $table-inverse-bg;
 123
 124   th,
 125   td,
 126   thead th {
 127     border-color: $body-bg;
 128   }
 129
 130   &.table-bordered {
 131     border: 0;
 132   }
 133 }
 134
 135
 136
 137 // Responsive tables
 138 //
 139 // Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
 140 // enabling horizontal scrolling. Only applies <768px. Everything above that
 141 // will display normally.
 142
 143 .table-responsive {
 144   display: block;
 145   width: 100%;
 146   overflow-x: auto;
 147   -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
 148
 149   // Prevent double border on horizontal scroll due to use of `display: block;`
 150   &.table-bordered {
 151     border: 0;
 152   }
 153 }