Short note on what CSS display properties do to table semantics

Direct Link →

We've blogged about responsive tables a number of times over the years. There's a variety of techniques, and which you choose should be based on the data in the table and the UX you're going for. But many of them rely upon resetting a table element's natural display value to something else, for example display: block. Steve Faulkner warns us:

When CSS display: block or display: grid or display: flex is set on the table element, bad things happen. The table is no longer represented as a table in the accessibility tree, row elements/semantics are no longer represented in any form.

He argues that the browser is making a mistake here by altering those semantics, but since they do, it's good to know it's fixable with (a slew of) ARIA roles.

Here's more from Adrian Roselli including a demo with proper markup.