Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
tables.html 12.54 KiB
1 
<div class="bs-docs-section">
2 
  <h1 id="tables" class="page-header">Tables</h1>
3
4 
  <h2 id="tables-example">Basic example</h2>
5 
  <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</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">
7 
    <table class="table">
8 
      <caption>Optional table caption.</caption>
9 
      <thead>
10 
        <tr>
11 
          <th>#</th>
12 
          <th>First Name</th>
13 
          <th>Last Name</th>
14 
          <th>Username</th>
15 
        </tr>
16 
      </thead>
17 
      <tbody>
18 
        <tr>
19 
          <td>1</td>
20 
          <td>Mark</td>
21 
          <td>Otto</td>
22 
          <td>@mdo</td>
23 
        </tr>
24 
        <tr>
25 
          <td>2</td>
26 
          <td>Jacob</td>
27 
          <td>Thornton</td>
28 
          <td>@fat</td>
29 
        </tr>
30 
        <tr>
31 
          <td>3</td>
32 
          <td>Larry</td>
33 
          <td>the Bird</td>
34 
          <td>@twitter</td>
35 
        </tr>
36 
      </tbody>
37 
    </table>
38 
  </div><!-- /example -->
39 
{% highlight html %}
40 
<table class="table">
41 
  ...
42 
</table>
43 
{% endhighlight %}
44
45
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>&lt;tbody&gt;</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>
51 
  </div>
52 
  <div class="bs-example">
53 
    <table class="table table-striped">
54 
      <thead>
55 
        <tr>
56 
          <th>#</th>
57 
          <th>First Name</th>
58 
          <th>Last Name</th>
59 
          <th>Username</th>
60 
        </tr>
61 
      </thead>
62 
      <tbody>
63 
        <tr>
64 
          <td>1</td>
65 
          <td>Mark</td>
66 
          <td>Otto</td>
67 
          <td>@mdo</td>
68 
        </tr>
69 
        <tr>
70 
          <td>2</td>
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div><!-- /example --> {% highlight html %} <table class="table table-striped"> ... </table> {% endhighlight %} <h2 id="tables-bordered">Bordered table</h2> <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p> <div class="bs-example"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td rowspan="2">1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>Mark</td> <td>Otto</td> <td>@TwBootstrap</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div><!-- /example --> {% highlight html %} <table class="table table-bordered"> ... </table> {% endhighlight %} <h2 id="tables-hover-rows">Hover rows</h2> <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p> <div class="bs-example"> <table class="table table-hover"> <thead>
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
<tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div><!-- /example --> {% highlight html %} <table class="table table-hover"> ... </table> {% endhighlight %} <h2 id="tables-condensed">Condensed table</h2> <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p> <div class="bs-example"> <table class="table table-condensed"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div><!-- /example --> {% highlight html %} <table class="table table-condensed">
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
... </table> {% endhighlight %} <h2 id="tables-contextual-classes">Contextual classes</h2> <p>Use contextual classes to color table rows or individual cells.</p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"> <col class="col-xs-7"> </colgroup> <thead> <tr> <th>Class</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td> <code>.active</code> </td> <td>Applies the hover color to a particular row or cell</td> </tr> <tr> <td> <code>.success</code> </td> <td>Indicates a successful or positive action</td> </tr> <tr> <td> <code>.info</code> </td> <td>Indicates a neutral informative change or action</td> </tr> <tr> <td> <code>.warning</code> </td> <td>Indicates a warning that might need attention</td> </tr> <tr> <td> <code>.danger</code> </td> <td>Indicates a dangerous or potentially negative action</td> </tr> </tbody> </table> </div> <div class="bs-example"> <table class="table"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr>
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
<tr> <td>2</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="success"> <td>3</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>4</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="info"> <td>5</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>6</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="warning"> <td>7</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>8</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="danger"> <td>9</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> </div><!-- /example --> {% highlight html %} <!-- On rows --> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr> {% endhighlight %} <div class="bs-callout bs-callout-warning" id="callout-tables-context-accessibility"> <h4>Conveying meaning to assistive technologies</h4>
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
<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> </div> <h2 id="tables-responsive">Responsive tables</h2> <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> <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-ff-fieldset"> <h4>Firefox and fieldsets</h4> <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> {% highlight css %} @-moz-document url-prefix() { fieldset { display: table-cell; } } {% endhighlight %} <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> </div> <div class="bs-example"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>#</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>2</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>3</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table> </div><!-- /.table-responsive --> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Table heading</th> <th>Table heading</th>
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
<th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>2</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>3</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table> </div><!-- /.table-responsive --> </div><!-- /example --> {% highlight html %} <div class="table-responsive"> <table class="table"> ... </table> </div> {% endhighlight %} </div>