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. Read more about tables/grids in the UX Guidelines.

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

Design

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

Contact Information
# 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

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

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

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

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 
				
<!-- Default tables -->
<table class="table">
  ...
</table>

<!-- Hover rows -->
<table class="table table-hover">
  ...
</table>

<!-- Active rows -->
<table class="table table-active">
  ...
</table>

<!-- Condensed tables -->
<table class="table table-active">
  ...
</table>

<!-- Responsive tables -->
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>