resources/scss/bootstrap/_tables.scss

   1 //
   2 // Tables
   3 // --------------------------------------------------
   4
   5 table {
   6   background-color: $table-bg;
   7 }
   8
   9 caption {
  10   padding-top: $table-cell-padding;
  11   padding-bottom: $table-cell-padding;
  12   color: $text-muted;
  13   text-align: left;
  14 }
  15
  16 th {
  17   text-align: left;
  18 }
  19
  20 // Baseline styles
  21
  22 .table {
  23   width: 100%;
  24   max-width: 100%;
  25   margin-bottom: $line-height-computed;
  26   // Cells
  27   > thead,
  28   > tbody,
  29   > tfoot {
  30         > tr {
  31           > th,
  32           > td {
  33                 padding: $table-cell-padding;
  34                 line-height: $line-height-base;
  35                 vertical-align: top;
  36                 border-top: 1px solid $table-border-color;
  37           }
  38         }
  39   }
  40   // Bottom align for column headings
  41   > thead > tr > th {
  42         vertical-align: bottom;
  43         border-bottom: 2px solid $table-border-color;
  44   }
  45   // Remove top border from thead by default
  46   > caption + thead,
  47   > colgroup + thead,
  48   > thead:first-child {
  49         > tr:first-child {
  50           > th,
  51           > td {
  52                 border-top: 0;
  53           }
  54         }
  55   }
  56   // Account for multiple tbody instances
  57   > tbody + tbody {
  58         border-top: 2px solid $table-border-color;
  59   }
  60
  61   // Nesting
  62   .table {
  63         background-color: $body-bg;
  64   }
  65 }
  66
  67 // Condensed table w/ half padding
  68
  69 .table-condensed {
  70   > thead,
  71   > tbody,
  72   > tfoot {
  73         > tr {
  74           > th,
  75           > td {
  76                 padding: $table-condensed-cell-padding;
  77           }
  78         }
  79   }
  80 }
  81
  82 // Bordered version
  83 //
  84 // Add borders all around the table and between all the columns.
  85
  86 .table-bordered {
  87   border: 1px solid $table-border-color;
  88   > thead,
  89   > tbody,
  90   > tfoot {
  91         > tr {
  92           > th,
  93           > td {
  94                 border: 1px solid $table-border-color;
  95           }
  96         }
  97   }
  98   > thead > tr {
  99         > th,
 100         > td {
 101           border-bottom-width: 2px;
 102         }
 103   }
 104 }
 105
 106 // Zebra-striping
 107 //
 108 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 109
 110 .table-striped {
 111   > tbody > tr:nth-of-type(odd) {
 112         background-color: $table-bg-accent;
 113   }
 114 }
 115
 116 // Hover effect
 117 //
 118 // Placed here since it has to come after the potential zebra striping
 119
 120 .table-hover {
 121   > tbody > tr:hover {
 122         background-color: $table-bg-hover;
 123   }
 124 }
 125
 126 // Table cell sizing
 127 //
 128 // Reset default table behavior
 129
 130 table col[class*="col-"] {
 131   position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
 132   float: none;
 133   display: table-column;
 134 }
 135
 136 table {
 137   td,
 138   th {
 139         &[class*="col-"] {
 140           position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
 141           float: none;
 142           display: table-cell;
 143         }
 144   }
 145 }
 146
 147 // Table backgrounds
 148 //
 149 // Exact selectors below required to override `.table-striped` and prevent
 150 // inheritance to nested tables.
 151
 152 // Generate the contextual variants
 153 @include table-row-variant('active', $table-bg-active);
 154 @include table-row-variant('success', $state-success-bg);
 155 @include table-row-variant('info', $state-info-bg);
 156 @include table-row-variant('warning', $state-warning-bg);
 157 @include table-row-variant('danger', $state-danger-bg);
 158
 159 // Responsive tables
 160 //
 161 // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
 162 // by enabling horizontal scrolling. Only applies <768px. Everything above that
 163 // will display normally.
 164
 165 .table-responsive {
 166   overflow-x: auto;
 167   min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
 168
 169   @media screen and (max-width: $screen-xs-max) {
 170         width: 100%;
 171         margin-bottom: ($line-height-computed * 0.75);
 172         overflow-y: hidden;
 173         -ms-overflow-style: -ms-autohiding-scrollbar;
 174         border: 1px solid $table-border-color;
 175
 176         // Tighten up spacing
 177         > .table {
 178           margin-bottom: 0;
 179
 180           // Ensure the content doesn't wrap
 181           > thead,
 182           > tbody,
 183           > tfoot {
 184                 > tr {
 185                   > th,
 186                   > td {
 187                         white-space: nowrap;
 188                   }
 189                 }
 190           }
 191         }
 192
 193         // Special overrides for the bordered tables
 194         > .table-bordered {
 195           border: 0;
 196
 197           // Nuke the appropriate borders so that the parent can handle them
 198           > thead,
 199           > tbody,
 200           > tfoot {
 201                 > tr {
 202                   > th:first-child,
 203                   > td:first-child {
 204                         border-left: 0;
 205                   }
 206                   > th:last-child,
 207                   > td:last-child {
 208                         border-right: 0;
 209                   }
 210                 }
 211           }
 212
 213           // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
 214           // chances are there will be only one `tr` in a `thead` and that would
 215           // remove the border altogether.
 216           > tbody,
 217           > tfoot {
 218                 > tr:last-child {
 219                   > th,
 220                   > td {
 221                         border-bottom: 0;
 222                   }
 223                 }
 224           }
 225
 226         }
 227   }
 228 }