Tables are scrollable or reformatted on mobile

HTML tables have no built-in responsiveness. At mobile widths, a data table with more than four or five columns will overflow the viewport — either forcing horizontal scroll on the entire page (a WCAG 2.2 SC 1.4.10 Reflow violation) or getting clipped silently. Users lose access to the rightmost columns, which often contain the most actionable data: status, actions, amounts. Scrollable table wrappers preserve all data while keeping the page layout intact. Reformatted stacked layouts are a stronger solution for complex tables but require deliberate CSS work.

Wrap every <table> in a horizontally scrollable container. In JSX:

<div className="overflow-x-auto w-full">
  <table className="min-w-full text-sm">...</table>
</div>

For denser data tables, a stacked mobile layout avoids scroll entirely. In src/app/globals.css:

@media (max-width: 640px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; clip: rect(0 0 0 0); }
  tr { margin-bottom: 1rem; border: 1px solid var(--border); }
  td::before { content: attr(data-label); font-weight: 600; display: block; }
}

• ID: mobile-responsiveness.layout.responsive-tables

• Severity: medium

• What to look for: Search for <table> elements in components. Check whether they are wrapped in a scrollable container (overflow-x: auto on a parent div), reformatted using media queries, or implemented using a responsive table pattern.

• Pass criteria: Count all <table> elements in the codebase. For each table, verify it is wrapped in a horizontally-scrollable container (overflow-x: auto on a parent div) or CSS reformats it for mobile display. Report: "X of Y tables have a mobile-responsive strategy (scroll wrapper or reformat)." All tables (100%) must have at least 1 responsive strategy.

• Fail criteria: At least 1 table exists without a horizontal scroll wrapper or mobile reformatting strategy, and table content is wide enough to cause overflow on mobile.

• Skip (N/A) when: No <table> elements detected in the codebase — 0 tables found.

• Detail on fail: "1 of 3 tables lacks a responsive strategy — data table in components/dashboard/users-table.tsx has no overflow wrapper and will cause horizontal scroll on mobile".

• Remediation:

  <div class="overflow-x-auto">
    <table class="min-w-full">...</table>
  </div>
  

  For data-heavy tables, consider a stacked mobile layout:

  @media (max-width: 640px) {
    table, thead, tbody, tr, th, td { display: block; }
    tr { margin-bottom: 1rem; }
  }