Skip to content
NativeCSS
Docs contents

Tables

helpers/tables.css - two strategies for narrow screens.

.ncss-table-scroll (default recommendation)

Horizontal scrolling, preserves full table semantics for screen readers.

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

.ncss-table-stacked (opt-in)

Card-stack look below 36rem (needs a data-label attribute on each <td>) - deliberately breaks programmatic table semantics in favor of readability. Only use it when the content should really read like "record cards".

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