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