Wir haben im Laufe der Jahre über responsive Tabellen gebloggt. Es gibt eine Vielzahl von Techniken, und welche Sie wählen, sollte sich nach den Daten in der Tabelle und dem UX-Ansatz richten, den Sie verfolgen. Viele davon beruhen jedoch darauf, den natürlichen Display-Wert eines Tabellenelements auf etwas anderes zurückzusetzen, zum Beispiel display: block. Steve Faulkner warnt uns
Wenn für das Tabellenelement CSS
display: blockoderdisplay: gridoderdisplay: flexgesetzt wird, passieren schlimme Dinge. Die Tabelle wird nicht mehr als Tabelle im Accessibility Tree dargestellt, Zeilenelemente/Semantiken werden in keiner Form mehr dargestellt.
Er argumentiert, dass der Browser hier einen Fehler macht, indem er diese Semantiken ändert, aber da er es tut, ist es gut zu wissen, dass es mit (einer Reihe von) ARIA-Rollen behoben werden kann.
Hier gibt es mehr von Adrian Roselli, inklusive einer Demo mit korrektem Markup.