Tables

It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Basic Example

For 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

Stripped Table

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

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

Contexual Table

Use contextual classes to color table rows or individual cells.

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

Condensed Table

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Tomasz Owczarczyk @mdo
5 Justine Ko @justine

Bordered Table

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

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

Responsive Table

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).

# Heading Heading Heading Heading
1 Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell