--- 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 ``. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## Basic example {% example html %}
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endexample %} ## Inverse table {% example html %}
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endexample %} ## Table head options Use one of two modifier classes to make ``s appear light or dark gray. {% example html %}
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endexample %} ## Striped rows Use `.table-striped` to add zebra-striping to any table row within the ``. {% example html %}
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endexample %} ## Bordered table Add `.table-bordered` for borders on all sides of the table and cells. {% example html %}
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
{% endexample %} ## Hoverable rows Add `.table-hover` to enable a hover state on table rows within a ``. {% example html %}
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endexample %} ## Small table Add `.table-sm` to make tables more compact by cutting cell padding in half. {% example html %}
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% 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 overridden 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](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685). {% 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 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
{% highlight html %}
...
{% endhighlight %} ### Reflow {% example html %}
# 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
{% endexample %}