← All elements
<div class="rt"><table><thead><tr><th>Name</th><th>Plan</th><th>Seats</th></tr></thead><tbody><tr><td data-l="Name">Ada</td><td data-l="Plan">Pro</td><td data-l="Seats">5</td></tr><tr><td data-l="Name">Lin</td><td data-l="Plan">Team</td><td data-l="Seats">25</td></tr></tbody></table></div>About this table
A data table that turns each row into a labelled card on narrow screens, using data-label attributes and a container query.
How it works
The table sits in a wrapper that is a size container. Below a container width of 220 pixels a container query hides the header row and turns rows and cells into blocks. Each cell shows its column name before its value through td::before reading its data-l attribute, so the table becomes a list of small labelled cards.
Ways to customise it
- Change 220px to set when the table stacks.
- Add columns, giving each cell a data-l label.
- Edit the header and row colours.
Good to know
When stacked the table loses its semantic roles in some screen readers, so test it. Container queries are supported in current browsers, and older ones keep the normal table.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.