0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-05 17:24:20 +01:00
Bootstrap/site/docs/4.3/content/tables.md
Mark Otto 1ded0d6a4e
Release v4.3.0 (#28228)
* Prep for v4.3.0

* More updates for v4.3.0.

* rerun to build docs source map
2019-02-11 11:15:34 -08:00

18 KiB

layout title description group toc
docs Tables Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap. content 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 <table>, 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.

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

Table head options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

Striped rows

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

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

Bordered table

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

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

Borderless table

Add .table-borderless for a table without borders.

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

.table-borderless can also be used on dark tables.

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

Hoverable rows

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

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

Small table

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

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

{% capture example %}

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

Contextual classes

Use contextual classes to color table rows or individual cells.

  {% for color in site.data.theme-colors %}
  <tr class="table-{{ color.name }}">
    <th scope="row">{{ color.name | capitalize }}</th>
    <td>Cell</td>
    <td>Cell</td>
  </tr>{% endfor %}
</tbody>
Class Heading Heading
Active Cell Cell
Default Cell Cell

{% 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.

# Heading Heading
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell

{% highlight html %}

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

{% include callout-warning-color-assistive-technologies.md %}

Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.

{% include callout-info-mediaqueries-breakpoints.md %}

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.

{% capture example %}

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{% endcapture %} {% include example.html content=example %}

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

{% capture callout %}

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. {% endcapture %} {% include callout.html content=callout type="warning" %}

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

{% highlight html %}

...
{% endhighlight %}

Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

These tables may appear broken until their responsive styles apply at specific viewport widths.

{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
{% highlight html %}
...
{% endhighlight %} {% endunless %}{% endfor %}