Table

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.