libs/bootstrap/less/tables.less

   1 //
   2 // Tables
   3 // --------------------------------------------------
   4
   5
   6 // BASE TABLES
   7 // -----------------
   8
   9 table {
  10   max-width: 100%;
  11   background-color: @tableBackground;
  12   border-collapse: collapse;
  13   border-spacing: 0;
  14 }
  15
  16 // BASELINE STYLES
  17 // ---------------
  18
  19 .table {
  20   width: 100%;
  21   margin-bottom: @baseLineHeight;
  22   // Cells
  23   th,
  24   td {
  25     padding: 8px;
  26     line-height: @baseLineHeight;
  27     text-align: left;
  28     vertical-align: top;
  29     border-top: 1px solid @tableBorder;
  30   }
  31   th {
  32     font-weight: bold;
  33   }
  34   // Bottom align for column headings
  35   thead th {
  36     vertical-align: bottom;
  37   }
  38   // Remove top border from thead by default
  39   caption + thead tr:first-child th,
  40   caption + thead tr:first-child td,
  41   colgroup + thead tr:first-child th,
  42   colgroup + thead tr:first-child td,
  43   thead:first-child tr:first-child th,
  44   thead:first-child tr:first-child td {
  45     border-top: 0;
  46   }
  47   // Account for multiple tbody instances
  48   tbody + tbody {
  49     border-top: 2px solid @tableBorder;
  50   }
  51
  52   // Nesting
  53   .table {
  54     background-color: @bodyBackground;
  55   }
  56 }
  57
  58
  59
  60 // CONDENSED TABLE W/ HALF PADDING
  61 // -------------------------------
  62
  63 .table-condensed {
  64   th,
  65   td {
  66     padding: 4px 5px;
  67   }
  68 }
  69
  70
  71 // BORDERED VERSION
  72 // ----------------
  73
  74 .table-bordered {
  75   border: 1px solid @tableBorder;
  76   border-collapse: separate; // Done so we can round those corners!
  77   *border-collapse: collapse; // IE7 can't round corners anyway
  78   border-left: 0;
  79   .border-radius(@baseBorderRadius);
  80   th,
  81   td {
  82     border-left: 1px solid @tableBorder;
  83   }
  84   // Prevent a double border
  85   caption + thead tr:first-child th,
  86   caption + tbody tr:first-child th,
  87   caption + tbody tr:first-child td,
  88   colgroup + thead tr:first-child th,
  89   colgroup + tbody tr:first-child th,
  90   colgroup + tbody tr:first-child td,
  91   thead:first-child tr:first-child th,
  92   tbody:first-child tr:first-child th,
  93   tbody:first-child tr:first-child td {
  94     border-top: 0;
  95   }
  96   // For first th/td in the first row in the first thead or tbody
  97   thead:first-child tr:first-child > th:first-child,
  98   tbody:first-child tr:first-child > td:first-child,
  99   tbody:first-child tr:first-child > th:first-child {
 100     .border-top-left-radius(@baseBorderRadius);
 101   }
 102   // For last th/td in the first row in the first thead or tbody
 103   thead:first-child tr:first-child > th:last-child,
 104   tbody:first-child tr:first-child > td:last-child,
 105   tbody:first-child tr:first-child > th:last-child {
 106     .border-top-right-radius(@baseBorderRadius);
 107   }
 108   // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
 109   thead:last-child tr:last-child > th:first-child,
 110   tbody:last-child tr:last-child > td:first-child,
 111   tbody:last-child tr:last-child > th:first-child,
 112   tfoot:last-child tr:last-child > td:first-child,
 113   tfoot:last-child tr:last-child > th:first-child {
 114     .border-bottom-left-radius(@baseBorderRadius);
 115   }
 116   // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
 117   thead:last-child tr:last-child > th:last-child,
 118   tbody:last-child tr:last-child > td:last-child,
 119   tbody:last-child tr:last-child > th:last-child,
 120   tfoot:last-child tr:last-child > td:last-child,
 121   tfoot:last-child tr:last-child > th:last-child {
 122     .border-bottom-right-radius(@baseBorderRadius);
 123   }
 124
 125   // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
 126   tfoot + tbody:last-child tr:last-child td:first-child {
 127     .border-bottom-left-radius(0);
 128   }
 129   tfoot + tbody:last-child tr:last-child td:last-child {
 130     .border-bottom-right-radius(0);
 131   }
 132
 133   // Special fixes to round the left border on the first td/th
 134   caption + thead tr:first-child th:first-child,
 135   caption + tbody tr:first-child td:first-child,
 136   colgroup + thead tr:first-child th:first-child,
 137   colgroup + tbody tr:first-child td:first-child {
 138     .border-top-left-radius(@baseBorderRadius);
 139   }
 140   caption + thead tr:first-child th:last-child,
 141   caption + tbody tr:first-child td:last-child,
 142   colgroup + thead tr:first-child th:last-child,
 143   colgroup + tbody tr:first-child td:last-child {
 144     .border-top-right-radius(@baseBorderRadius);
 145   }
 146
 147 }
 148
 149
 150
 151
 152 // ZEBRA-STRIPING
 153 // --------------
 154
 155 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 156 .table-striped {
 157   tbody {
 158     > tr:nth-child(odd) > td,
 159     > tr:nth-child(odd) > th {
 160       background-color: @tableBackgroundAccent;
 161     }
 162   }
 163 }
 164
 165
 166 // HOVER EFFECT
 167 // ------------
 168 // Placed here since it has to come after the potential zebra striping
 169 .table-hover {
 170   tbody {
 171     tr:hover > td,
 172     tr:hover > th {
 173       background-color: @tableBackgroundHover;
 174     }
 175   }
 176 }
 177
 178
 179 // TABLE CELL SIZING
 180 // -----------------
 181
 182 // Reset default grid behavior
 183 table td[class*="span"],
 184 table th[class*="span"],
 185 .row-fluid table td[class*="span"],
 186 .row-fluid table th[class*="span"] {
 187   display: table-cell;
 188   float: none; // undo default grid column styles
 189   margin-left: 0; // undo default grid column styles
 190 }
 191
 192 // Change the column widths to account for td/th padding
 193 .table td,
 194 .table th {
 195   &.span1     { .tableColumns(1); }
 196   &.span2     { .tableColumns(2); }
 197   &.span3     { .tableColumns(3); }
 198   &.span4     { .tableColumns(4); }
 199   &.span5     { .tableColumns(5); }
 200   &.span6     { .tableColumns(6); }
 201   &.span7     { .tableColumns(7); }
 202   &.span8     { .tableColumns(8); }
 203   &.span9     { .tableColumns(9); }
 204   &.span10    { .tableColumns(10); }
 205   &.span11    { .tableColumns(11); }
 206   &.span12    { .tableColumns(12); }
 207 }
 208
 209
 210
 211 // TABLE BACKGROUNDS
 212 // -----------------
 213 // Exact selectors below required to override .table-striped
 214
 215 .table tbody tr {
 216   &.success > td {
 217     background-color: @successBackground;
 218   }
 219   &.error > td {
 220     background-color: @errorBackground;
 221   }
 222   &.warning > td {
 223     background-color: @warningBackground;
 224   }
 225   &.info > td {
 226     background-color: @infoBackground;
 227   }
 228 }
 229
 230 // Hover states for .table-hover
 231 .table-hover tbody tr {
 232   &.success:hover > td {
 233     background-color: darken(@successBackground, 5%);
 234   }
 235   &.error:hover > td {
 236     background-color: darken(@errorBackground, 5%);
 237   }
 238   &.warning:hover > td {
 239     background-color: darken(@warningBackground, 5%);
 240   }
 241   &.info:hover > td {
 242     background-color: darken(@infoBackground, 5%);
 243   }
 244 }