3.0.2 -> 3.0.3
[bootswatch] / 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 .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       float: none;
145       display: table-cell;
146     }
147   }
148 }
149
150
151 // Table backgrounds
152 //
153 // Exact selectors below required to override `.table-striped` and prevent
154 // inheritance to nested tables.
155
156 // Generate the contextual variants
157 .table-row-variant(active; @table-bg-active);
158 .table-row-variant(success; @state-success-bg);
159 .table-row-variant(danger; @state-danger-bg);
160 .table-row-variant(warning; @state-warning-bg);
161
162
163 // Responsive tables
164 //
165 // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
166 // by enabling horizontal scrolling. Only applies <768px. Everything above that
167 // will display normally.
168
169 @media (max-width: @screen-xs-max) {
170   .table-responsive {
171     width: 100%;
172     margin-bottom: (@line-height-computed * 0.75);
173     overflow-y: hidden;
174     overflow-x: scroll;
175     -ms-overflow-style: -ms-autohiding-scrollbar;
176     border: 1px solid @table-border-color;
177     -webkit-overflow-scrolling: touch;
178
179     // Tighten up spacing
180     > .table {
181       margin-bottom: 0;
182
183       // Ensure the content doesn't wrap
184       > thead,
185       > tbody,
186       > tfoot {
187         > tr {
188           > th,
189           > td {
190             white-space: nowrap;
191           }
192         }
193       }
194     }
195
196     // Special overrides for the bordered tables
197     > .table-bordered {
198       border: 0;
199
200       // Nuke the appropriate borders so that the parent can handle them
201       > thead,
202       > tbody,
203       > tfoot {
204         > tr {
205           > th:first-child,
206           > td:first-child {
207             border-left: 0;
208           }
209           > th:last-child,
210           > td:last-child {
211             border-right: 0;
212           }
213         }
214       }
215
216       // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
217       // chances are there will be only one `tr` in a `thead` and that would
218       // remove the border altogether.
219       > tbody,
220       > tfoot {
221         > tr:last-child {
222           > th,
223           > td {
224             border-bottom: 0;
225           }
226         }
227       }
228
229     }
230   }
231 }