css/bootstrap/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 {
 108   > tbody > tr:nth-child(odd) {
 109     > td,
 110     > th {
 111       background-color: @table-bg-accent;
 112     }
 113   }
 114 }
 115
 116
 117 // Hover effect
 118 //
 119 // Placed here since it has to come after the potential zebra striping
 120
 121 .table-hover {
 122   > tbody > tr:hover {
 123     > td,
 124     > th {
 125       background-color: @table-bg-hover;
 126     }
 127   }
 128 }
 129
 130
 131 // Table cell sizing
 132 //
 133 // Reset default table behavior
 134
 135 table col[class*="col-"] {
 136   position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
 137   float: none;
 138   display: table-column;
 139 }
 140 table {
 141   td,
 142   th {
 143     &[class*="col-"] {
 144       position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
 145       float: none;
 146       display: table-cell;
 147     }
 148   }
 149 }
 150
 151
 152 // Table backgrounds
 153 //
 154 // Exact selectors below required to override `.table-striped` and prevent
 155 // inheritance to nested tables.
 156
 157 // Generate the contextual variants
 158 .table-row-variant(active; @table-bg-active);
 159 .table-row-variant(success; @state-success-bg);
 160 .table-row-variant(info; @state-info-bg);
 161 .table-row-variant(warning; @state-warning-bg);
 162 .table-row-variant(danger; @state-danger-bg);
 163
 164
 165 // Responsive tables
 166 //
 167 // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
 168 // by enabling horizontal scrolling. Only applies <768px. Everything above that
 169 // will display normally.
 170
 171 @media (max-width: @screen-xs-max) {
 172   .table-responsive {
 173     width: 100%;
 174     margin-bottom: (@line-height-computed * 0.75);
 175     overflow-y: hidden;
 176     overflow-x: scroll;
 177     -ms-overflow-style: -ms-autohiding-scrollbar;
 178     border: 1px solid @table-border-color;
 179     -webkit-overflow-scrolling: touch;
 180
 181     // Tighten up spacing
 182     > .table {
 183       margin-bottom: 0;
 184
 185       // Ensure the content doesn't wrap
 186       > thead,
 187       > tbody,
 188       > tfoot {
 189         > tr {
 190           > th,
 191           > td {
 192             white-space: nowrap;
 193           }
 194         }
 195       }
 196     }
 197
 198     // Special overrides for the bordered tables
 199     > .table-bordered {
 200       border: 0;
 201
 202       // Nuke the appropriate borders so that the parent can handle them
 203       > thead,
 204       > tbody,
 205       > tfoot {
 206         > tr {
 207           > th:first-child,
 208           > td:first-child {
 209             border-left: 0;
 210           }
 211           > th:last-child,
 212           > td:last-child {
 213             border-right: 0;
 214           }
 215         }
 216       }
 217
 218       // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
 219       // chances are there will be only one `tr` in a `thead` and that would
 220       // remove the border altogether.
 221       > tbody,
 222       > tfoot {
 223         > tr:last-child {
 224           > th,
 225           > td {
 226             border-bottom: 0;
 227           }
 228         }
 229       }
 230
 231     }
 232   }
 233 }