CssHow-ToBeginner · 3 min read

How to Make Table Responsive in CSS: Simple Steps

To make a table responsive in CSS, wrap the <table> inside a container with overflow-x: auto; and display: block;. This allows horizontal scrolling on small screens, keeping the table readable without breaking the layout.

📐

Syntax

Wrap your <table> element inside a container (like a <div>) and apply these CSS rules:

overflow-x: auto; enables horizontal scrolling if the table is wider than the container.
display: block; makes the container behave like a block element, allowing scrolling.

css

<div class="table-responsive">
  <table>
    <!-- table content -->
  </table>
</div>

.table-responsive {
  overflow-x: auto;
  display: block;
}

💻

Example

This example shows a wide table inside a container that scrolls horizontally on small screens, keeping all columns visible without breaking the page layout.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Table Example</title>
<style>
  .table-responsive {
    overflow-x: auto;
    display: block;
    max-width: 100%;
    border: 1px solid #ccc;
  }
  table {
    border-collapse: collapse;
    width: 800px; /* wide table to demonstrate scrolling */
  }
  th, td {
    border: 1px solid #999;
    padding: 0.5rem 1rem;
    text-align: left;
  }
</style>
</head>
<body>

<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
        <th>Occupation</th>
        <th>Company</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>30</td>
        <td>New York</td>
        <td>Engineer</td>
        <td>TechCorp</td>
        <td>alice@example.com</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>25</td>
        <td>Chicago</td>
        <td>Designer</td>
        <td>DesignPro</td>
        <td>bob@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Output

A webpage showing a wide table with six columns inside a bordered container. On narrow screens, a horizontal scrollbar appears below the table allowing side-to-side scrolling to see all columns.

⚠️

Common Pitfalls

One common mistake is applying overflow-x: auto; directly to the <table> element, which does not work because tables do not scroll well by themselves. Another issue is not setting display: block; on the container, which can prevent scrolling. Also, forgetting to set a max-width or width on the container can cause layout problems.

css

/* Wrong way: applying overflow to table */
table {
  overflow-x: auto; /* This won't make the table scroll */
}

/* Right way: wrap table in a container */
.table-responsive {
  overflow-x: auto;
  display: block;
  max-width: 100%;
}

📊

Quick Reference

Property	Purpose	Example Value
overflow-x	Allows horizontal scrolling if content is wider	auto
display	Makes container block-level to enable scrolling	block
max-width	Limits container width to viewport width	100%
table width	Set wider than container to test scrolling	800px

✅

Key Takeaways

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

Do not apply overflow properties directly to the table element.

Set max-width: 100% on the container to keep it within the viewport.

Use a fixed or wide table width to test responsiveness and scrolling.

Responsive tables improve usability on small screens by preventing layout breakage.