HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS overscroll-behavior-x Table Example</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      min-width: 150vw;
      background: #e2e8f0;
    }
    .page-content {
      padding: 2rem;
      max-width: 40rem;
    }
    .page-content p {
      line-height: 1.6;
      color: #334155;
    }
    .table-wrapper {
      max-width: 360px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      border: 1px solid #cbd5e1;
      border-radius: 0.5rem;
      background: #fff;
    }
    table {
      border-collapse: collapse;
      min-width: 640px;
      font-size: 0.875rem;
    }
    th, td {
      padding: 0.65rem 0.85rem;
      border-bottom: 1px solid #e2e8f0;
      text-align: left;
      white-space: nowrap;
    }
    th {
      background: #f8fafc;
      font-weight: 700;
      color: #334155;
    }
    td {
      color: #475569;
    }
  </style>
</head>
<body>
  <div class="page-content">
    <h1>Page with Wide Data Table</h1>
    <p>This page is wide so you can scroll the document behind the table. Scroll the table wrapper to its left or right edge and keep scrolling — the page should stay put thanks to <code>overscroll-behavior-x: contain</code>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scroll the main page and the table independently to compare horizontal behavior at scroll boundaries.</p>
    <div class="table-wrapper" tabindex="0" aria-label="Sales data table">
      <table>
        <thead>
          <tr>
            <th>Region</th>
            <th>Product</th>
            <th>Units</th>
            <th>Revenue</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>North America</td><td>Widget Pro</td><td>1,240</td><td>$62,000</td><td>Shipped</td></tr>
          <tr><td>Europe</td><td>Widget Lite</td><td>980</td><td>$39,200</td><td>Processing</td></tr>
          <tr><td>Asia Pacific</td><td>Widget Max</td><td>760</td><td>$45,600</td><td>Shipped</td></tr>
          <tr><td>Latin America</td><td>Widget Pro</td><td>540</td><td>$27,000</td><td>Pending</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
CSS overscroll-behavior-x Property - Data Table
