Tables

A bare <table> is full-width with a bottom rule per row and a heavier rule under <thead> / above <tfoot>. Use <caption> and scope on your header cells.

Jellyfish by danger level

Species	Danger	Habitat
Cotylorhiza tuberculata	Mild	Mediterranean Sea
Pelagia noctiluca	Severe	Mediterranean Sea
Rhopilema nomadica	Severe	Indo-Pacific Ocean

Modifiers

Add any combination to the <table>:

Table modifier classes

Class	Effect
.is-striped	Shade alternate body rows.
.has-border	Border every cell.
.is-hoverable	Highlight the row under the pointer.
.is-responsive	Below $table-responsive-breakpoint, each row stacks and every <td> shows its column label. Add data-label="…" to each cell, or let the JS fill them in on load.
.{family} on <table> / <tr> / <td>	Colour the whole table, a row, or one cell (needs $generate-table-modifiers).

Striped

Species	Danger	Habitat
Cotylorhiza tuberculata	Mild	Mediterranean Sea
Pelagia noctiluca	Severe	Mediterranean Sea
Rhopilema nomadica	Severe	Indo-Pacific Ocean

Bordered

Species	Danger	Habitat
Cotylorhiza tuberculata	Mild	Mediterranean Sea
Pelagia noctiluca	Severe	Mediterranean Sea
Rhopilema nomadica	Severe	Indo-Pacific Ocean

Hoverable

Species	Danger	Habitat
Cotylorhiza tuberculata	Mild	Mediterranean Sea
Pelagia noctiluca	Severe	Mediterranean Sea
Rhopilema nomadica	Severe	Indo-Pacific Ocean

Colours

Needs $generate-table-modifiers. A .{family} on <table> colours the whole table; on <tr> a row; on <td> one cell.

Class	Heading
table.primary	table.primary

tr.error	tr.error
tr.primary	tr.primary
td.success	td.error
td.warning	td.success
tr.warning	tr.warning

Responsive stack

Two ways to keep a wide table usable on a narrow screen. .is-responsive is the preferred one — it's more work but reads far better on a phone; .table-container is the fallback for when a stack doesn't make sense for that table's data (lots of numeric columns you want to keep scanning across, for instance).

Method one: .is-responsive

Below $table-responsive-breakpoint (900px) each row stacks into its own block, and every cell — <td> or a row-header <th scope="row"> alike — needs its column heading repeated inline. Add data-label="…" to each cell yourself, or leave it out: responsive-tables.js copies each <thead> <th>'s text into the matching column's cells' data-label on DOMContentLoaded, by position — so it works whether that column's cells are <td> or <th>.

Resize the window below $table-responsive-breakpoint (900px) to see it stack

Species	Stinger	Habitat
Cotylorhiza tuberculata	Harmless to humans, but best not touched.	Very abundant in Mediterranean bays, especially in warmer water.
Rhopilema nomadica	A bad stinger; told apart from Rhizostoma by its lack of a blue rim.	An Indo-Pacific species that reached the eastern Mediterranean via the Suez Canal.

Method two: .table-container

Wrap the table instead of classing it, and it scrolls horizontally rather than reflowing — far less control (no per-column labelling, no reordering), so reach for it only when a stack genuinely doesn't suit the data.