• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1//
2// Tables
3// --------------------------------------------------
4
5
6table {
7  background-color: @table-bg;
8}
9caption {
10  padding-top: @table-cell-padding;
11  padding-bottom: @table-cell-padding;
12  color: @text-muted;
13  text-align: left;
14}
15th {
16  text-align: left;
17}
18
19
20// Baseline styles
21
22.table {
23  width: 100%;
24  max-width: 100%;
25  margin-bottom: @line-height-computed;
26  // Cells
27  > thead,
28  > tbody,
29  > tfoot {
30    > tr {
31      > th,
32      > td {
33        padding: @table-cell-padding;
34        line-height: @line-height-base;
35        vertical-align: top;
36        border-top: 1px solid @table-border-color;
37      }
38    }
39  }
40  // Bottom align for column headings
41  > thead > tr > th {
42    vertical-align: bottom;
43    border-bottom: 2px solid @table-border-color;
44  }
45  // Remove top border from thead by default
46  > caption + thead,
47  > colgroup + thead,
48  > thead:first-child {
49    > tr:first-child {
50      > th,
51      > td {
52        border-top: 0;
53      }
54    }
55  }
56  // Account for multiple tbody instances
57  > tbody + tbody {
58    border-top: 2px solid @table-border-color;
59  }
60
61  // Nesting
62  .table {
63    background-color: @body-bg;
64  }
65}
66
67
68// Condensed table w/ half padding
69
70.table-condensed {
71  > thead,
72  > tbody,
73  > tfoot {
74    > tr {
75      > th,
76      > td {
77        padding: @table-condensed-cell-padding;
78      }
79    }
80  }
81}
82
83
84// Bordered version
85//
86// Add borders all around the table and between all the columns.
87
88.table-bordered {
89  border: 1px solid @table-border-color;
90  > thead,
91  > tbody,
92  > tfoot {
93    > tr {
94      > th,
95      > td {
96        border: 1px solid @table-border-color;
97      }
98    }
99  }
100  > thead > tr {
101    > th,
102    > td {
103      border-bottom-width: 2px;
104    }
105  }
106}
107
108
109// Zebra-striping
110//
111// Default zebra-stripe styles (alternating gray and transparent backgrounds)
112
113.table-striped {
114  > tbody > tr:nth-of-type(odd) {
115    background-color: @table-bg-accent;
116  }
117}
118
119
120// Hover effect
121//
122// Placed here since it has to come after the potential zebra striping
123
124.table-hover {
125  > tbody > tr:hover {
126    background-color: @table-bg-hover;
127  }
128}
129
130
131// Table cell sizing
132//
133// Reset default table behavior
134
135table col[class*="col-"] {
136  position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
137  float: none;
138  display: table-column;
139}
140table {
141  td,
142  th {
143    &[class*="col-"] {
144      position: static; // Prevent border hiding in Firefox and IE9-11 (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.table-responsive {
172  overflow-x: auto;
173  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
174
175  @media screen and (max-width: @screen-xs-max) {
176    width: 100%;
177    margin-bottom: (@line-height-computed * 0.75);
178    overflow-y: hidden;
179    -ms-overflow-style: -ms-autohiding-scrollbar;
180    border: 1px solid @table-border-color;
181
182    // Tighten up spacing
183    > .table {
184      margin-bottom: 0;
185
186      // Ensure the content doesn't wrap
187      > thead,
188      > tbody,
189      > tfoot {
190        > tr {
191          > th,
192          > td {
193            white-space: nowrap;
194          }
195        }
196      }
197    }
198
199    // Special overrides for the bordered tables
200    > .table-bordered {
201      border: 0;
202
203      // Nuke the appropriate borders so that the parent can handle them
204      > thead,
205      > tbody,
206      > tfoot {
207        > tr {
208          > th:first-child,
209          > td:first-child {
210            border-left: 0;
211          }
212          > th:last-child,
213          > td:last-child {
214            border-right: 0;
215          }
216        }
217      }
218
219      // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
220      // chances are there will be only one `tr` in a `thead` and that would
221      // remove the border altogether.
222      > tbody,
223      > tfoot {
224        > tr:last-child {
225          > th,
226          > td {
227            border-bottom: 0;
228          }
229        }
230      }
231
232    }
233  }
234}
235