1 <div class="bs-docs-section">
2 <h1 id="tables" class="page-header">Tables</h1>
4 <h2 id="tables-example">Basic example</h2>
5 <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
6 <div class="bs-example" data-example-id="simple-table">
8 <caption>Optional table caption.</caption>
19 <th scope="row">1</th>
25 <th scope="row">2</th>
31 <th scope="row">3</th>
38 </div><!-- /example -->
46 <h2 id="tables-striped">Striped rows</h2>
47 <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p>
48 <div class="bs-callout bs-callout-danger" id="callout-tables-striped-ie8">
49 <h4>Cross-browser compatibility</h4>
50 <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
52 <div class="bs-example" data-example-id="striped-table">
53 <table class="table table-striped">
64 <th scope="row">1</th>
70 <th scope="row">2</th>
76 <th scope="row">3</th>
83 </div><!-- /example -->
85 <table class="table table-striped">
91 <h2 id="tables-bordered">Bordered table</h2>
92 <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
93 <div class="bs-example" data-example-id="bordered-table">
94 <table class="table table-bordered">
105 <th scope="row">1</th>
111 <th scope="row">2</th>
117 <th scope="row">3</th>
124 </div><!-- /example -->
126 <table class="table table-bordered">
132 <h2 id="tables-hover-rows">Hover rows</h2>
133 <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p>
134 <div class="bs-example" data-example-id="hoverable-table">
135 <table class="table table-hover">
146 <th scope="row">1</th>
152 <th scope="row">2</th>
158 <th scope="row">3</th>
165 </div><!-- /example -->
167 <table class="table table-hover">
173 <h2 id="tables-condensed">Condensed table</h2>
174 <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
175 <div class="bs-example" data-example-id="condensed-table">
176 <table class="table table-condensed">
187 <th scope="row">1</th>
193 <th scope="row">2</th>
199 <th scope="row">3</th>
200 <td colspan="2">Larry the Bird</td>
205 </div><!-- /example -->
207 <table class="table table-condensed">
213 <h2 id="tables-contextual-classes">Contextual classes</h2>
214 <p>Use contextual classes to color table rows or individual cells.</p>
215 <div class="table-responsive">
216 <table class="table table-bordered table-striped">
218 <col class="col-xs-1">
219 <col class="col-xs-7">
232 <td>Applies the hover color to a particular row or cell</td>
236 <code>.success</code>
238 <td>Indicates a successful or positive action</td>
244 <td>Indicates a neutral informative change or action</td>
248 <code>.warning</code>
250 <td>Indicates a warning that might need attention</td>
256 <td>Indicates a dangerous or potentially negative action</td>
261 <div class="bs-example" data-example-id="contextual-table">
262 <table class="table">
266 <th>Column heading</th>
267 <th>Column heading</th>
268 <th>Column heading</th>
273 <th scope="row">1</th>
274 <td>Column content</td>
275 <td>Column content</td>
276 <td>Column content</td>
279 <th scope="row">2</th>
280 <td>Column content</td>
281 <td>Column content</td>
282 <td>Column content</td>
285 <th scope="row">3</th>
286 <td>Column content</td>
287 <td>Column content</td>
288 <td>Column content</td>
291 <th scope="row">4</th>
292 <td>Column content</td>
293 <td>Column content</td>
294 <td>Column content</td>
297 <th scope="row">5</th>
298 <td>Column content</td>
299 <td>Column content</td>
300 <td>Column content</td>
303 <th scope="row">6</th>
304 <td>Column content</td>
305 <td>Column content</td>
306 <td>Column content</td>
309 <th scope="row">7</th>
310 <td>Column content</td>
311 <td>Column content</td>
312 <td>Column content</td>
315 <th scope="row">8</th>
316 <td>Column content</td>
317 <td>Column content</td>
318 <td>Column content</td>
321 <th scope="row">9</th>
322 <td>Column content</td>
323 <td>Column content</td>
324 <td>Column content</td>
328 </div><!-- /example -->
331 <tr class="active">...</tr>
332 <tr class="success">...</tr>
333 <tr class="warning">...</tr>
334 <tr class="danger">...</tr>
335 <tr class="info">...</tr>
337 <!-- On cells (`td` or `th`) -->
339 <td class="active">...</td>
340 <td class="success">...</td>
341 <td class="warning">...</td>
342 <td class="danger">...</td>
343 <td class="info">...</td>
346 <div class="bs-callout bs-callout-warning" id="callout-tables-context-accessibility">
347 <h4>Conveying meaning to assistive technologies</h4>
348 <p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
351 <h2 id="tables-responsive">Responsive tables</h2>
352 <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
354 <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-overflow">
355 <h4>Vertical clipping/truncation</h4>
356 <p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
358 <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-ff-fieldset">
359 <h4>Firefox and fieldsets</h4>
360 <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
362 @-moz-document url-prefix() {
363 fieldset { display: table-cell; }
366 <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
369 <div class="bs-example" data-example-id="simple-responsive-table">
370 <div class="table-responsive">
371 <table class="table">
375 <th>Table heading</th>
376 <th>Table heading</th>
377 <th>Table heading</th>
378 <th>Table heading</th>
379 <th>Table heading</th>
380 <th>Table heading</th>
385 <th scope="row">1</th>
394 <th scope="row">2</th>
403 <th scope="row">3</th>
413 </div><!-- /.table-responsive -->
415 <div class="table-responsive">
416 <table class="table table-bordered">
420 <th>Table heading</th>
421 <th>Table heading</th>
422 <th>Table heading</th>
423 <th>Table heading</th>
424 <th>Table heading</th>
425 <th>Table heading</th>
430 <th scope="row">1</th>
439 <th scope="row">2</th>
448 <th scope="row">3</th>
458 </div><!-- /.table-responsive -->
459 </div><!-- /example -->
461 <div class="table-responsive">
462 <table class="table">