HtmlHow-ToBeginner · 3 min read

How to Make Table Scrollable in HTML: Simple Steps

To make a table scrollable in HTML, wrap the <table> inside a container element like a <div> and apply CSS overflow-x: auto; with a fixed width or max-width. This creates a horizontal scrollbar when the table is wider than the container, allowing users to scroll the table horizontally.

📐

Syntax

Wrap your <table> inside a container element such as a <div>. Then apply CSS styles to the container:

overflow-x: auto; enables horizontal scrolling when needed.
max-width or width limits the container size.
display: block; or inline-block; ensures the container respects width and overflow.

html

<div style="overflow-x: auto; max-width: 600px;">
  <table>
    <!-- table content -->
  </table>
</div>

💻

Example

This example shows a wide table inside a scrollable container. When the table is wider than 400px, a horizontal scrollbar appears so you can scroll to see all columns.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Scrollable Table Example</title>
<style>
  .table-container {
    max-width: 400px;
    overflow-x: auto;
    border: 1px solid #ccc;
  }
  table {
    border-collapse: collapse;
    width: 800px; /* wider than container */
  }
  th, td {
    border: 1px solid #666;
    padding: 8px;
    text-align: left;
  }
</style>
</head>
<body>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
          <th>Header 5</th>
          <th>Header 6</th>
          <th>Header 7</th>
          <th>Header 8</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
          <td>Row 1, Cell 3</td>
          <td>Row 1, Cell 4</td>
          <td>Row 1, Cell 5</td>
          <td>Row 1, Cell 6</td>
          <td>Row 1, Cell 7</td>
          <td>Row 1, Cell 8</td>
        </tr>
        <tr>
          <td>Row 2, Cell 1</td>
          <td>Row 2, Cell 2</td>
          <td>Row 2, Cell 3</td>
          <td>Row 2, Cell 4</td>
          <td>Row 2, Cell 5</td>
          <td>Row 2, Cell 6</td>
          <td>Row 2, Cell 7</td>
          <td>Row 2, Cell 8</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Output

A table with 8 columns inside a box 400px wide. A horizontal scrollbar appears below the box allowing horizontal scrolling to see all columns.

⚠️

Common Pitfalls

Common mistakes when making tables scrollable include:

Not wrapping the table in a container with overflow-x: auto;, so no scrollbar appears.
Setting width on the table smaller than its content, causing layout issues.
Using overflow: scroll; which always shows scrollbars, even when not needed.
Forgetting to set a max-width or fixed width on the container, so the table expands the page instead of scrolling.

html

<!-- Wrong: No container -->
<table style="width: 800px;">
  <!-- content -->
</table>

<!-- Right: Wrapped in container -->
<div style="max-width: 400px; overflow-x: auto;">
  <table style="width: 800px;">
    <!-- content -->
  </table>
</div>

📊

Quick Reference

Property	Description	Example Value
overflow-x	Controls horizontal scrolling	auto
max-width	Limits container width to trigger scrolling	400px
width (table)	Set wider than container for scroll	800px
border	Optional, for visible container edges	1px solid #ccc

✅

Key Takeaways

Wrap your table in a container with CSS overflow-x: auto to enable horizontal scrolling.

Set a max-width or fixed width on the container to limit visible area and trigger scroll.

Make the table width wider than the container to see the scrollbar in action.

Avoid using overflow: scroll to prevent always-visible scrollbars.

Always test responsiveness to ensure scroll works on smaller screens.