Accessible Table Content
Brief table description
|
Monday |
Tuesday |
Wednesday |
Thursday |
Friday |
09:00 - 11:00 |
Closed |
Open |
Open |
Closed |
Closed |
11:00 - 13:00 |
Open |
Open |
Closed |
Closed |
Closed |
13:00 - 15:00 |
Open |
Open |
Open |
Closed |
Closed |
15:00 - 17:00 |
Closed |
Closed |
Closed |
Open |
Open |
Table content with hover
Just add the class .hover to lightly darken the table rows on hover.
Table Header |
Table Header |
Table Header |
Content Goes Here |
This is longer content Donec id elit non mi porta gravida at eget metus. |
Content Goes Here |
Content Goes Here |
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. |
Content Goes Here |
Content Goes Here |
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. |
Content Goes Here |
Table content without stripes
By default, table rows are striped. There's an .unstriped class to remove the stripes.
Table Header |
Table Header |
Table Header |
Content Goes Here |
This is longer content Donec id elit non mi porta gravida at eget metus. |
Content Goes Here |
Content Goes Here |
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. |
Content Goes Here |
Content Goes Here |
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. |
Content Goes Here |
Stacked Table
To stack a table on small screens
Fitness class |
Type |
Duration |
In-person/Virtual |
Kickboxing |
Cardio |
45 min |
In-person |
BODYPUMP |
Strength |
45 min |
In-person |
GRIT™ |
H.I.T.T. |
30 min |
Virtual |
Scrolling Table
Add a wrapper element with the class .table-scroll
around your table to enable horizontal scrolling.