2014-07-12 05:34:47 +00:00
---
layout: page
title: Tables
---
2014-12-30 20:47:04 +00:00
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>` .
2014-07-12 05:34:47 +00:00
## Basic example
{% example html %}
< table class = "table" >
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-12 05:34:47 +00:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-12 05:34:47 +00:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-12 05:34:47 +00:00
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
2014-07-14 07:23:46 +00:00
## Inverse table
{% example html %}
< table class = "table table-inverse" >
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-14 07:23:46 +00:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-14 07:23:46 +00:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-14 07:23:46 +00:00
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
2014-07-14 06:45:34 +00:00
## Table head options
Use one of two modifier classes to make `<thead>` s appear light or dark gray.
{% example html %}
< table class = "table" >
< thead class = "thead-inverse" >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-14 06:45:34 +00:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-14 06:45:34 +00:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-14 06:45:34 +00:00
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< thead class = "thead-default" >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-14 06:45:34 +00:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-14 06:45:34 +00:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-14 06:45:34 +00:00
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
2014-07-12 05:34:47 +00:00
## Striped rows
Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` .
{% example html %}
< table class = "table table-striped" >
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-12 05:34:47 +00:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-12 05:34:47 +00:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-12 05:34:47 +00:00
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
## Bordered table
Add `.table-bordered` for borders on all sides of the table and cells.
{% example html %}
< table class = "table table-bordered" >
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-19 06:59:47 +00:00
< th scope = "row" > 1< / th >
2014-07-12 05:34:47 +00:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-19 06:59:47 +00:00
< th scope = "row" > 2< / th >
2014-07-12 05:34:47 +00:00
< td > Mark< / td >
< td > Otto< / td >
< td > @TwBootstrap< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-12 05:34:47 +00:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 4< / th >
2014-07-12 05:34:47 +00:00
< td colspan = "2" > Larry the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
## Hoverable rows
Add `.table-hover` to enable a hover state on table rows within a `<tbody>` .
{% example html %}
< table class = "table table-hover" >
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-12 05:34:47 +00:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-12 05:34:47 +00:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-12 05:34:47 +00:00
< td colspan = "2" > Larry the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
2014-09-18 05:14:27 +00:00
## Small table
2014-07-12 05:34:47 +00:00
2014-09-18 05:14:27 +00:00
Add `.table-sm` to make tables more compact by cutting cell padding in half.
2014-07-12 05:34:47 +00:00
{% example html %}
2014-09-18 05:14:27 +00:00
< table class = "table table-sm" >
2014-07-12 05:34:47 +00:00
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-12 05:34:47 +00:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-12 05:34:47 +00:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-12 05:34:47 +00:00
< td colspan = "2" > Larry the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
## Contextual classes
Use contextual classes to color table rows or individual cells.
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" >
2014-07-12 05:34:47 +00:00
< code > .active< / code >
2014-12-01 04:17:45 +00:00
< / th >
2014-07-12 05:34:47 +00:00
< td > Applies the hover color to a particular row or cell< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" >
2014-07-12 05:34:47 +00:00
< code > .success< / code >
2014-12-01 04:17:45 +00:00
< / th >
2014-07-12 05:34:47 +00:00
< td > Indicates a successful or positive action< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" >
2014-07-12 05:34:47 +00:00
< code > .info< / code >
2014-12-01 04:17:45 +00:00
< / th >
2014-07-12 05:34:47 +00:00
< td > Indicates a neutral informative change or action< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" >
2014-07-12 05:34:47 +00:00
< code > .warning< / code >
2014-12-01 04:17:45 +00:00
< / th >
2014-07-12 05:34:47 +00:00
< td > Indicates a warning that might need attention< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" >
2014-07-12 05:34:47 +00:00
< code > .danger< / code >
2014-12-01 04:17:45 +00:00
< / th >
2014-07-12 05:34:47 +00:00
< 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" >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-12 05:34:47 +00:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-12 05:34:47 +00:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr class = "success" >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-12 05:34:47 +00:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 4< / th >
2014-07-12 05:34:47 +00:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr class = "info" >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 5< / th >
2014-07-12 05:34:47 +00:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 6< / th >
2014-07-12 05:34:47 +00:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr class = "warning" >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 7< / th >
2014-07-12 05:34:47 +00:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 8< / th >
2014-07-12 05:34:47 +00:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr class = "danger" >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 9< / th >
2014-07-12 05:34:47 +00:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< / tbody >
< / table >
< / div >
{% 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 %}
## 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.
2015-01-04 04:08:58 +00:00
< div class = "bs-callout bs-callout-warning" id = "callout-tables-responsive-overflow" >
< h4 > Vertical clipping/truncation< / h4 >
< 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 >
< / div >
2014-07-12 05:34:47 +00:00
< div class = "bs-callout bs-callout-warning" >
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-12 05:34:47 +00:00
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-12 05:34:47 +00:00
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-12 05:34:47 +00:00
< 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 >
< div class = "table-responsive" >
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-07-12 05:34:47 +00:00
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-07-12 05:34:47 +00:00
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-07-12 05:34:47 +00:00
< 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 >
< / div >
{% highlight html %}
< div class = "table-responsive" >
< table class = "table" >
...
< / table >
< / div >
{% endhighlight %}
2014-08-06 00:45:24 +00:00
### Reflow
{% example html %}
< table class = "table table-reflow" >
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 1< / th >
2014-08-06 00:45:24 +00:00
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 2< / th >
2014-08-06 00:45:24 +00:00
< 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 >
2014-12-01 05:01:50 +00:00
< th scope = "row" > 3< / th >
2014-08-06 00:45:24 +00:00
< 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 >
{% endexample %}
