git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/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
  18 .table {
  19   width: 100%;
  20   margin-bottom: @line-height-computed;
  21   // Cells
  22   thead,
  23   tbody,
  24   tfoot {
  25     > tr {
  26       > th,
  27       > td {
  28         padding: @table-cell-padding;
  29         line-height: @line-height-base;
  30         vertical-align: top;
  31         border-top: 1px solid @table-border-color;
  32       }
  33     }
  34   }
  35   // Bottom align for column headings
  36   thead > tr > th {
  37     vertical-align: bottom;
  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, td {
  45         border-top: 0;
  46       }
  47     }
  48   }
  49   // Account for multiple tbody instances
  50   tbody + tbody {
  51     border-top: 2px solid @table-border-color;
  52   }
  53
  54   // Nesting
  55   .table {
  56     background-color: @body-bg;
  57   }
  58 }
  59
  60
  61
  62 // Condensed table w/ half padding
  63 // -------------------------------
  64
  65 .table-condensed {
  66   thead,
  67   tbody,
  68   tfoot {
  69     > tr {
  70       > th,
  71       > td {
  72         padding: @table-condensed-cell-padding;
  73       }
  74     }
  75   }
  76 }
  77
  78
  79
  80 // Bordered version
  81 // ----------------
  82
  83 .table-bordered {
  84   border: 1px solid @table-border-color;
  85   > thead,
  86   > tbody,
  87   > tfoot {
  88     > tr {
  89       > th,
  90       > td {
  91         border: 1px solid @table-border-color;
  92       }
  93     }
  94   }
  95 }
  96
  97
  98
  99 // Zebra-striping
 100 // --------------
 101
 102 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 103 .table-striped {
 104   > tbody {
 105     > tr:nth-child(odd) {
 106       > td,
 107       > th {
 108         background-color: @table-bg-accent;
 109       }
 110     }
 111   }
 112 }
 113
 114
 115
 116 // Hover effect
 117 // ------------
 118
 119 // Placed here since it has to come after the potential zebra striping
 120 .table-hover {
 121   > tbody {
 122     > tr:hover {
 123       > td,
 124       > th {
 125         background-color: @table-bg-hover;
 126       }
 127     }
 128   }
 129 }
 130
 131
 132
 133 // Table cell sizing
 134 // -----------------
 135
 136 // Reset default table behavior
 137 table col[class^="col-"] {
 138   float: none;
 139   display: table-column;
 140 }
 141 table {
 142   td,
 143   th {
 144     &[class^="col-"] {
 145       float: none;
 146       display: table-cell;
 147     }
 148   }
 149 }
 150
 151
 152
 153 // Table backgrounds
 154 // -----------------
 155 // Exact selectors below required to override `.table-striped` and prevent
 156 // inheritance to nested tables.
 157
 158 .table > thead > tr,
 159 .table > tbody > tr,
 160 .table > tfoot > tr {
 161   > td.active,
 162   > th.active,
 163   &.active > td,
 164   &.active > th  {
 165     background-color: @table-bg-hover;
 166   }
 167   > td.success,
 168   > th.success,
 169   &.success > td,
 170   &.success > th {
 171     background-color: @state-success-bg;
 172     border-color: @state-success-border;
 173   }
 174   > td.danger,
 175   > th.danger,
 176   &.danger > td,
 177   &.danger > th {
 178     background-color: @state-danger-bg;
 179     border-color: @state-danger-border;
 180   }
 181   > td.warning,
 182   > th.warning,
 183   &.warning > td,
 184   &.warning > th {
 185     background-color: @state-warning-bg;
 186     border-color: @state-warning-border;
 187   }
 188 }
 189
 190 // Hover states for `.table-hover`
 191 // Note: this is not available for cells or rows within `thead` or `tfoot`.
 192 .table-hover > tbody > tr {
 193   > td.success:hover,
 194   > th.success:hover,
 195   &.success:hover > td {
 196     background-color: darken(@state-success-bg, 5%);
 197     border-color: darken(@state-success-border, 5%);
 198   }
 199   > td.danger:hover,
 200   > th.danger:hover,
 201   &.danger:hover > td {
 202     background-color: darken(@state-danger-bg, 5%);
 203     border-color: darken(@state-danger-border, 5%);
 204   }
 205   > td.warning:hover,
 206   > th.warning:hover,
 207   &.warning:hover > td {
 208     background-color: darken(@state-warning-bg, 5%);
 209     border-color: darken(@state-warning-border, 5%);
 210   }
 211 }