Skip to content

Tables

Basic

Tables carry some very simple styles just to make them feel consistent, they have a width of 100% so they fill their parent element.

Styling

There are several additional classes that can be applied to tables:

  • table-bordered apply a border to the table
  • table-hover highlight row on hover
  • table-striped alternating row background colors
  • table-headed add background color to the header

All colors are defined in variables. Example with all additional classes.

Responsive

Tables dont work well on smaller screens, one way of fixing this is to wrap the table in a div with auto scrolling. This will enable the table to take up as much space as needed and enable you to scroll left and right.

<div class="scroll-x"><table>...</table></div>