2014-07-12 07:34:47 +02:00
---
layout: page
title: Tables
---
2014-12-30 21:47:04 +01: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 07:34:47 +02: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 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-12 07:34:47 +02:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-12 07:34:47 +02:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-12 07:34:47 +02:00
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
2014-07-14 09:23:46 +02: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 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-14 09:23:46 +02:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-14 09:23:46 +02:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-14 09:23:46 +02:00
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
2014-07-14 08:45:34 +02: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 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-14 08:45:34 +02:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-14 08:45:34 +02:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-14 08:45:34 +02:00
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
2015-05-28 00:49:55 +02:00
< / table >
< table class = "table" >
2014-07-14 08:45:34 +02:00
< 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 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-14 08:45:34 +02:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-14 08:45:34 +02:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-14 08:45:34 +02:00
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
2014-07-12 07:34:47 +02: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 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-12 07:34:47 +02:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-12 07:34:47 +02:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-12 07:34:47 +02: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 07:59:47 +01:00
< th scope = "row" > 1< / th >
2014-07-12 07:34:47 +02:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-19 07:59:47 +01:00
< th scope = "row" > 2< / th >
2014-07-12 07:34:47 +02:00
< td > Mark< / td >
< td > Otto< / td >
< td > @TwBootstrap< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-12 07:34:47 +02:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 4< / th >
2014-07-12 07:34:47 +02: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 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-12 07:34:47 +02:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-12 07:34:47 +02:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-12 07:34:47 +02:00
< td colspan = "2" > Larry the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
{% endexample %}
2014-09-18 07:14:27 +02:00
## Small table
2014-07-12 07:34:47 +02:00
2014-09-18 07:14:27 +02:00
Add `.table-sm` to make tables more compact by cutting cell padding in half.
2014-07-12 07:34:47 +02:00
{% example html %}
2014-09-18 07:14:27 +02:00
< table class = "table table-sm" >
2014-07-12 07:34:47 +02:00
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-12 07:34:47 +02:00
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-12 07:34:47 +02:00
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-12 07:34:47 +02: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 06:01:50 +01:00
< th scope = "row" >
2015-03-31 03:08:01 +02:00
< code > .table-active< / code >
2014-12-01 05:17:45 +01:00
< / th >
2014-07-12 07:34:47 +02:00
< td > Applies the hover color to a particular row or cell< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" >
2015-03-31 03:08:01 +02:00
< code > .table-success< / code >
2014-12-01 05:17:45 +01:00
< / th >
2014-07-12 07:34:47 +02:00
< td > Indicates a successful or positive action< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" >
2015-03-31 03:08:01 +02:00
< code > .table-info< / code >
2014-12-01 05:17:45 +01:00
< / th >
2014-07-12 07:34:47 +02:00
< td > Indicates a neutral informative change or action< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" >
2015-03-31 03:08:01 +02:00
< code > .table-warning< / code >
2014-12-01 05:17:45 +01:00
< / th >
2014-07-12 07:34:47 +02:00
< td > Indicates a warning that might need attention< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" >
2015-03-31 03:08:01 +02:00
< code > .table-danger< / code >
2014-12-01 05:17:45 +01:00
< / th >
2014-07-12 07:34:47 +02:00
< td > Indicates a dangerous or potentially negative action< / td >
< / tr >
< / tbody >
< / table >
< / div >
2015-04-16 23:07:20 +02:00
< div class = "bd-example" >
2014-07-12 07:34:47 +02:00
< table class = "table" >
< thead >
< tr >
< th > #< / th >
< th > Column heading< / th >
< th > Column heading< / th >
< th > Column heading< / th >
< / tr >
< / thead >
< tbody >
2015-03-31 03:08:01 +02:00
< tr class = "table-active" >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-12 07:34:47 +02:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-12 07:34:47 +02:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
2015-03-31 03:08:01 +02:00
< tr class = "table-success" >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-12 07:34:47 +02:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 4< / th >
2014-07-12 07:34:47 +02:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
2015-03-31 03:08:01 +02:00
< tr class = "table-info" >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 5< / th >
2014-07-12 07:34:47 +02:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 6< / th >
2014-07-12 07:34:47 +02:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
2015-03-31 03:08:01 +02:00
< tr class = "table-warning" >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 7< / th >
2014-07-12 07:34:47 +02:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 8< / th >
2014-07-12 07:34:47 +02:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
2015-03-31 03:08:01 +02:00
< tr class = "table-danger" >
2014-12-01 06:01:50 +01:00
< th scope = "row" > 9< / th >
2014-07-12 07:34:47 +02:00
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< / tbody >
< / table >
< / div >
{% highlight html %}
<!-- On rows -->
2015-03-31 03:08:01 +02:00
< tr class = "table-active" > ...< / tr >
< tr class = "table-success" > ...< / tr >
< tr class = "table-warning" > ...< / tr >
< tr class = "table-danger" > ...< / tr >
< tr class = "table-info" > ...< / tr >
2014-07-12 07:34:47 +02:00
<!-- On cells (`td` or `th` ) -->
< tr >
2015-03-31 03:08:01 +02:00
< td class = "table-active" > ...< / td >
< td class = "table-success" > ...< / td >
< td class = "table-warning" > ...< / td >
< td class = "table-danger" > ...< / td >
< td class = "table-info" > ...< / td >
2014-07-12 07:34:47 +02:00
< / 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-04-17 01:56:40 +02:00
{% 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:
2015-01-04 05:08:58 +01:00
2014-07-12 07:34:47 +02:00
{% highlight css %}
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
{% endhighlight %}
2015-04-17 01:56:40 +02:00
For more information, read [this Stack Overflow answer ](http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685 ).
{% endcallout %}
2014-07-12 07:34:47 +02:00
2015-04-16 23:07:20 +02:00
< div class = "bd-example" >
2014-07-12 07:34:47 +02:00
< 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 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-12 07:34:47 +02: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 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-12 07:34:47 +02: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 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-12 07:34:47 +02: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 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-07-12 07:34:47 +02: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 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-07-12 07:34:47 +02: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 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-07-12 07:34:47 +02: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 02:45:24 +02: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 06:01:50 +01:00
< th scope = "row" > 1< / th >
2014-08-06 02:45:24 +02: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 06:01:50 +01:00
< th scope = "row" > 2< / th >
2014-08-06 02:45:24 +02: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 06:01:50 +01:00
< th scope = "row" > 3< / th >
2014-08-06 02:45:24 +02: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 %}