Getting started
CSS
Components
JavaScript
SCSS

Tables

Basic table

For the most basic of table styling, use the .table class.

Optional table caption.
# First Name Last Name Username
1 John Foobar @fbar
2 Joe Thornton @fat
3 James the Bird @twitter

Bordered table

To make a borderd table add the .table-bordered class.

Optional table caption.
# First Name Last Name Username
1 John Foobar @fbar
2 Joe Thornton @fat
3 James the Bird @twitter

Raised table

Make a table raised by adding the .raised class.

Optional table caption.
# First Name Last Name Username
1 John Foobar @fbar
2 Joe Thornton @fat
3 James the Bird @twitter

Hover table

Adding the .table-hover class highlights the rows on hover.

Optional table caption.
# First Name Last Name Username
1 John Foobar @fbar
2 Joe Thornton @fat
3 James the Bird @twitter

Responsive table

A responsive table will scroll horizontally at smaller screen sizes. This is handy for tables with lots of text. Simply wrap the table in a div with the .table-responsive class.

Optional table caption.
# First Name Last Name Username
1 John Foobar @fbar
2 Joe Thornton @fat
3 James the Bird @twitter

Table Highlights

You can highlight both rows and cells using Hubble's contextual classes. You can add the following classes .info, .success, .warning, .danger & .brand to rows, cells, table footer and table header.

# First Name Last Name Username
1 John Foobar @fbar
2 Joe Thornton @fat
3 James the Bird @twitter