avalanche-docs/app/data/theme/tables.md

---

layout: docs title: Tables

group: content

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be opt-in. Just add the base class .table to any <table>.

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

Basic example

{% example html %}

<tr>
  <th>#</th>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Username</th>
</tr>

<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>

{% endexample %}

Inverse table

{% example html %}

<tr>
  <th>#</th>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Username</th>
</tr>

<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>

{% endexample %}

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

{% example html %}

<tr>
  <th>#</th>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Username</th>
</tr>

<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>

<tr>
  <th>#</th>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Username</th>
</tr>

<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>

{% endexample %}

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

{% example html %}

<tr>
  <th>#</th>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Username</th>
</tr>

<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>

{% endexample %}

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

{% example html %}

<tr>
  <th>#</th>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Username</th>
</tr>

<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@TwBootstrap</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
</tr>
<tr>
  <th scope="row">4</th>
  <td colspan="2">Larry the Bird</td>
  <td>@twitter</td>
</tr>

{% endexample %}

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

{% example html %}

<tr>
  <th>#</th>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Username</th>
</tr>

<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td colspan="2">Larry the Bird</td>
  <td>@twitter</td>
</tr>

{% endexample %}

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

{% example html %}

<tr>
  <th>#</th>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Username</th>
</tr>

<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
</tr>
<tr>
  <th scope="row">3</th>
  <td colspan="2">Larry the Bird</td>
  <td>@twitter</td>
</tr>

{% endexample %}

Contextual classes

Use contextual classes to color table rows or individual cells.

Class	Description
.table-active	Applies the hover color to a particular row or cell
.table-success	Indicates a successful or positive action
.table-info	Indicates a neutral informative change or action
.table-warning	Indicates a warning that might need attention
.table-danger	Indicates a dangerous or potentially negative action

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content
8	Column content	Column content	Column content
9	Column content	Column content	Column content

{% highlight html %} ... ... ... ... ...

... ... ... ... ... {% endhighlight %}

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive 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.

{% callout warning %}

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, 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. {% endcallout %}

{% callout warning %}

Firefox and fieldsets

Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we don't provide in Bootstrap:

{% highlight css %} @-moz-document url-prefix() { fieldset { display: table-cell; } } {% endhighlight %}

For more information, read this Stack Overflow answer. {% endcallout %}

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

<table class="table table-bordered">
  <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>
      <th scope="row">1</th>
      <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>
      <th scope="row">2</th>
      <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>
      <th scope="row">3</th>
      <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>

{% highlight html %}

...

{% endhighlight %}

Reflow

{% example html %}

<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>

<tr>
  <th scope="row">1</th>
  <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>
  <th scope="row">2</th>
  <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>
  <th scope="row">3</th>
  <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>

{% endexample %}