--- layout: docs title: Tables description: Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap. group: content toc: true --- ## Examples 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 ``, then extend with custom styles or our various included modifier classes. Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent. {% example html %}
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endexample %} You can also invert the colors—with light text on dark backgrounds—with `.table-dark`. {% example html %}
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endexample %} ## Table head options Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` 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 %} {% 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 %} {% 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 %} {% 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 %} {% 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.
{% for color in site.data.theme-colors %} {% endfor %}
Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
{{ color.name | capitalize }} Column content Column content Column content
{% highlight html %} ... {% for color in site.data.theme-colors %} ...{% endfor %} ... {% for color in site.data.theme-colors %} ...{% endfor %} {% endhighlight %} Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles.
# 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 %} {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} {{ callout-include | markdownify }} ## Responsive tables Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `.table` to make them scroll horizontally at each `max-width` breakpoint 575px, 767px, 991px, and 1199px, respectively. For responsive tables that always scroll horizontally when the table is wider than its container, add the `.table-responsive` class on `.table`. {% 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 %}
# Table heading Table heading Table heading 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 Table cell Table cell Table cell
2 Table cell Table cell Table cell 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 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 %}