tables.md

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.

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

{{< /example >}}

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

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

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

{{< /example >}}

Striped rows

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

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

{{< /example >}}

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

{{< /example >}}

Bordered table

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

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

{{< /example >}}

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

{{< /example >}}

Borderless table

Add .table-borderless for a table without borders.

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

{{< /example >}}

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

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

{{< /example >}}

Hoverable rows

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

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

{{< /example >}}

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

{{< /example >}}

Small table

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

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

{{< /example >}}

{{< example >}}

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

{{< /example >}}

Contextual classes

Use contextual classes to color table rows or individual cells.

{{< table.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /table.inline >}}

Class	Heading	Heading
Active	Cell	Cell
Default	Cell	Cell
{{ .name | title }}	Cell	Cell

{{< highlight html >}}

...{{< table.inline >}} {{- range (index $.Site.Data "theme-colors") }} ... {{- end -}} {{< /table.inline >}} ...{{< table.inline >}} {{- range (index $.Site.Data "theme-colors") }} ... {{- end -}} {{< /table.inline >}} {{< /highlight >}}

Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{< docsref "/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

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

{{< callout warning >}} {{< partial "callout-warning-color-assistive-technologies.md" >}} {{< /callout >}}

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.

{{< callout info >}} {{< partial "callout-info-mediaqueries-breakpoints.md" >}} {{< /callout >}}

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.

{{< example >}}

List of users

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

{{< /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}.

{{< 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. {{< /callout >}}

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

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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.

{{< tables.inline >}} {{ range $.Site.Data.breakpoints }} {{ if not (eq .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

{{ end -}} {{- end -}} {{< /tables.inline >}}

{{< highlight html >}} {{< tables.inline >}} {{- range $.Site.Data.breakpoints -}} {{- if not (eq .breakpoint "xs") }}

...

{{ end -}} {{- end -}} {{< /tables.inline >}} {{< /highlight >}}