Tables

Tables (or grids as UX designers are calling them) are used to display, manipulate and organise large amounts of data. The grid can be a fairly complex interface element with loads of functionality. An example of where a grid can be suitable is when you are to display an overview of e.g. documents or register posts.

Use when

  • You are to display large amounts of data in a structured way
  • The user needs to be able to sort, search, filter or otherwise manipulate the data

On this page you can find multiple types of grid table component and the style variants:

Table grid size variants:


Design

The default styling — light padding and only horizontal dividers — add the base class .table to any <table>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb
Users listed in this table: 6

Plain tables

For plain styling — light padding and no striped rows or horizontal dividers — add the class .table-plain (together with the base class) to any <table>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb

Size

Table grid size variants:

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb

Regular size table

Add .table-regular to make tables more compact by cutting cell padding.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb

Relaxed size table

Add .table-relaxed to make tables more compact by cutting cell padding.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb

Table row state

Hover on rows

For this style you need to add this additional class .table-hover to your table.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb

Active rows

For this style you need to add this additional class .table-active to your table. For case, the hover on each row will apply too.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb

Error validation table row

For this style you need to add the .has-errorclass to table row tag (<tr>). To indent the error icon just wrap it in container with the .indent-error class, the indent works only for the first table cell.

# First Name Last Name Username
1 Mark Otto @mdo
2 - (with tr.has-error) Jacob Thornton @fat
3 Stan Lucas @mdo
4 - (without tr.has-error) Ben Johnas @fat

Add the .px-32 helper class to the table tag to include the indent inside the table borders but outside the cell table.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Stan Lucas @mdo
4 Ben Johnas @fat

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 992px). When viewing on anything larger than 992px wide, you will not see any difference in these tables.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb

Demo tables

Interactive table with functionality, added through a custom javascript, for demonstration purposes.

 First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat
Larry the Bird @twitter

Summary:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nisi eleifend, sagittis ligula tempor, facilisis ligula. Integer non nunc non tortor faucibus mattis porttitor ac massa vestibulum vel ipsum vitae. Sed fringilla consequat libero, blandit pulvinar metus lobortis sit amet.

Skills:
Designer
Level:
85%
Stan Lucas @mdo
John Snow @fb
Ben Johnas @fat
Selected: 0 out of 6 items

Table without zebra striping

Tables now use zebra striping (alternating row colour) as style for improved readability. If really needed use the class (.layout-table) together with the other classes to disable zebra striping.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb
Users listed in this table: 6

Additional examples

The following examples are also used by our Playwright CSS property assertion tests.

Bordered table

Add .table-bordered to add a border around the entire table, useful when placing tables on a white background.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo

Sticky header

Add .table-header-sticky to make the header row stick to the top of a scrollable container.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb

Sticky first column

Add .table-first-column-sticky to make the first column stick when scrolling horizontally.

# First Name Last Name Username Email Phone
1 Mark Otto @mdo [email protected] 555-0101
2 Jacob Thornton @fat [email protected] 555-0102
3 Larry the Bird @twitter [email protected] 555-0103
4 Stan Lucas @mdo [email protected] 555-0104

Sticky last column

Add .table-last-column-sticky to make the last column stick when scrolling horizontally.

# First Name Last Name Username Email Actions
1 Mark Otto @mdo [email protected] Edit
2 Jacob Thornton @fat [email protected] Edit
3 Larry the Bird @twitter [email protected] Edit
4 Stan Lucas @mdo [email protected] Edit