1//
2// Tables
3// --------------------------------------------------
4
5
6table {
7  max-width: 100%;
8  background-color: @table-bg;
9}
10th {
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
131table col[class*="col-"] {
132  float: none;
133  display: table-column;
134}
135table {
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}
237