Due to the widespread use of tables across third-party widgets like calendars and date pickers, Bootstrap designed their tables to be opt-in. Just add the base class .table to any <table>. The basic table separates each row with a top border and supports formatting for th.

Examples

A simple table has no formatting and is used to have the semantic qualities of a table without the visual presentation of one. This table style can be combined with others to create additional visual options.

Examples

A small table is more compact by cutting cell padding in half and decrease the font size in the cells. The thead th remains the same height. This table style can be combined with others to create additional visual options.

Examples

A large table increases the cell padding and font size in the cells. The thead th remains the same height. This table style can be combined with others to create additional visual options.

Examples

A bordered table has borders on all sides of the table and cells. This table style can be combined with others to create additional visual options.

Examples

A striped table alternates striped row backgrounds to make it easier to visually distiguish rows of data. The th does not get striped. This table style can be combined with others to create additional visual options.

Examples

An inverse table has white text within dark rows. This table style can be combined with others to create additional visual options.

Examples

A table with rows that have a visible hover state. This table style can be combined with others to create additional visual options.

Examples

Use one of two modifier classes to make <thead>s appear light or dark. These styles can be combined with others to create additional visual options.

Examples

Use contextual classes to color table rows or individual cells. These styles can be combined with others to create additional visual options.

Examples

A responsive prevents the table from being too condensed horizontally, or from the table breaking the layout causing undesirable horizontal scrolling of the entire page by wrapping it in a parent container with horizontal overflow.

Examples

The table gridlist is a special responsive component that is semanticly a table, and appears as a table from 768px and up. At 767px and below, its layout changes to one where the headers drop into the individual rows, and some basic grid classes allow you to control the layout at the xs and sm breakpoints. The grid classes are very similar to the standard bootstrap grid classes, with no push/pull or offset options. It uses a 12-column system, with spacing related to table cell spacing instead of the standard gutter widths.

Examples

Usage

Rules

  • Tables are for presenting data and ahould not be used for layout
  • Tables must include a <caption> (see accessibility notes)
  • Tables should include column or row headings (see accessibility notes)

Constraints

  • Wide tables can break the layout if they are too wide and should be wrapped in a .table-responsive parent container
  • Responsive tables make use of overflow 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.

Principle

  • Tables help data to be organized and interpreted, both visually and semantically

Accessibility

  • Tables must include a <caption> to help identify the purpose of the table. The caption may be visually hidden using .sr-only. The caption can also include normal flow elements like headings.
  • Use <th> elements so that assisstive technology can effectively communicate row and column data. Additionally, use the scope="col" attribute on each <th> that relates to a column and the scope="row" attribute on each <th> that relates to a row.

Class Names

table
Required

Apply to the <table> element
table-simple
Modifier

Use with .table to create a table without any formatting
table-small
Modifier

Use with .table to create a table with decreased cell padding and font size
table-large
Modifier

Use with .table to create a table with increased cell padding and font size
table-bordered
Modifier

Use with .table to create a table with borders on all sides of the table and cells
table-striped
Modifier

Use with .table to add zebra-striping to any table row within the <tbody>
table-inverse
Modifier

Use with .table to have white text within dark rows
table-hover
Modifier

Use with .table to enable a hover state on table rows within a <tbody>
thead-inverse
Modifier

Use on <thead> for dark table headings with white text
thead-default
Modifier

Use on <thead> for light tinted table headings
table-active
Modifier

Use on <tr> or <td> to apply the hover color to a particular row or cell
table-success
Modifier

Use on <tr> or <td> to indicate successful or positive data
table-info
Modifier

Use on <tr> or <td> to highlight neutral data
table-warning
Modifier

Use on <tr> or <td> to indicate data that might need attention
table-danger
Modifier

Use on <tr> or <td> to indicate dangerous or potentially negative data
table-responsive
Modifier

Use on a parent container that wraps a .table to allow the table to scroll horizontally within the parent at the smaller breakpoints
table-gridlist
Modifier

Use with .table and add grid classes for your desired layout
gridlist-xs-*
Modifier

Use .gridlist-xs-1 through .gridlist-xs-12 to your table cells in the xs breakpoint
gridlist-sm-*
Modifier

Use .gridlist-sm-1 through .gridlist-sm-12 in the sm breakpoint if those need to change. Nothing is applied above the sm breakpoint.
gridlist-add-rule
Modifier

Add to a full-width table cell that needs a divider to seperate it from content above

Configuration

data-content
Required

For the table headers to appear in the grid layout of the gridlist tables, you need a copy of what its associated header is added as a data attribute to each <td> in the table body, e.g. data-content="Text of Header"
  • Last updated April 3, 2017
  • Authorable - Yes
  • Core - Tables