Plus UI Design · Practical guides

Build a responsive table around readable content

Keep a real HTML table and provide horizontal scrolling when its columns cannot fit comfortably.

Choose what must remain visible

A table is useful because users can compare the same columns across rows. On narrow screens, squeezing every column until the text breaks can destroy that benefit. Start by identifying essential columns, shorten labels where possible and then allow scrolling for the remaining width.

Use an overflow wrapper

The example keeps the table at a minimum width and lets the wrapper scroll. The visible caption explains the data, and each header has a column scope. Replace the example values with your own data and adjust widths after checking realistic content.

Test the surrounding page

The wrapper should scroll without making the whole page overflow. Check keyboard navigation, visible scroll behavior and long unbroken values. Test with browser zoom as well as a narrow viewport.

Example to adapt

<div class="overflow-x-auto">
  <table class="w-full min-w-[36rem] text-left">
    <caption class="mb-3 text-left">Project review status</caption>
    <thead><tr>
      <th scope="col">Project</th>
      <th scope="col">Owner</th>
      <th scope="col">Status</th>
    </tr></thead>
    <tbody><tr><td>Atlas</td><td>Sam</td><td>In review</td></tr></tbody>
  </table>
</div>