1.7Tables

Basic

A basic table without any styling can be created with just the standard <table> tag and accompanying elements.

Full-Width Tables

You can ensure that a table takes up 100% the width of it's container by using the .table--full modifier class.

Bordered Tables

Multiple modifier classes have been added to easily add borders to various parts of tables.

All Borders

You can use the modifier class .table--border to add borders to all parts of a table.

Outer Borders

You can use the modifier class .table--borderdOuter to add borders to the outside of a table.

Inner Borders

You can use the modifier class .table--borderInner to add borders to the inside of a table.

Horizontal Borders

You can use the modifier class .table--borderHorizontal to add borders to the horizontal parts of a table.

Filled Tables

A couple of modifier classes have been added to fill the rows inside of a table with a light gray color.

Even Fill

You can fill the even rows inside of a table using the .table--fillEven modifier class.

Odd Fill

You can fill the odd rows inside of a table using the .table--fillOdd modifier class.

Hover Tables

A couple of modifier classes have been added to add a hover effect to rows inside of a table with a light gray color.

Row Hover

You add a hover effect to the rows inside of a table using the .table--hoverRow modifier class.

Cell Hover

You add a hover effect to the cells inside of a table using the .table--hoverCell modifier class.

Flat Table

You can remove all styling from a table using the .table--flat modifier class.

Responsive Container

When you have a table with a lot of columns, you may not want to hide columns conditionally or shrink them down to the point where they are unreadable. By wrapping a table in the .table--responsive class, the size of the table remains the same and a horizontal scroll bar will show up, allowing users to scroll horizontally to view all of the information.

Try resizing the browser and see how the table below changes.