tmpl/less/tables.less

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