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:
display: flexis 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.
The post Short note on what CSS display properties do to table semantics appeared first on CSS-Tricks.