Zum Inhalt springen
NativeCSS
Handbuch-Inhalt

Tabellen

helpers/tables.css - zwei Strategien für schmale Screens.

.ncss-table-scroll (Standard-Empfehlung)

Horizontales Scrollen, bewahrt volle Tabellen-Semantik für Screenreader.

<div class="ncss-table-scroll">
  <table>...</table>
</div>

.ncss-table-stacked (Opt-in)

Karten-Stapel-Optik unterhalb 36rem (data-label-Attribut pro <td> nötig) - bricht die programmatische Tabellensemantik bewusst zugunsten der Lesbarkeit. Nur einsetzen, wenn der Inhalt wirklich wie "Datensatz-Karten" gelesen werden soll.

<td data-label="Name">Ada Lovelace</td>