HtmlHow-ToBeginner · 3 min read

How to Make Table Responsive in HTML: Simple Methods

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

📐

Syntax

Wrap your <table> element inside a container, usually a <div>, and apply CSS to that container.

overflow-x: auto; enables horizontal scrolling if the table is wider than the screen.
max-width: 100%; ensures the container does not exceed the screen width.

html

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

💻

Example

This example shows a wide table inside a scrollable container. On small screens, you can scroll horizontally 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>Responsive Table Example</title>
<style>
  .table-container {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid #ccc;
  }
  table {
    border-collapse: collapse;
    width: 800px; /* wider than typical mobile screen */
  }
  th, td {
    border: 1px solid #999;
    padding: 0.5rem 1rem;
    text-align: left;
  }
</style>
</head>
<body>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Description</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>$1</td>
          <td>50</td>
          <td>Fresh red apples</td>
          <td>Fruit</td>
        </tr>
        <tr>
          <td>Milk</td>
          <td>$2</td>
          <td>30</td>
          <td>Organic whole milk</td>
          <td>Dairy</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Output

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

⚠️

Common Pitfalls

Not wrapping the <table> in a container with overflow-x: auto; causes the table to overflow the screen and break layout.
Setting fixed widths on table columns without flexibility can cause horizontal scroll even on large screens.
Using width: 100% on the table alone does not make it responsive if content is wide.

html

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

<!-- Right: Wrapped in scroll container -->
<div style="overflow-x: auto; max-width: 100%;">
  <table style="width: 800px; border: 1px solid;">
    <!-- content -->
  </table>
</div>

📊

Quick Reference

Technique	Description	CSS Example
Wrap table in container	Allows horizontal scroll on small screens	overflow-x: auto; max-width: 100%;
Avoid fixed widths	Prevents forced overflow	Use relative widths or none
Use viewport meta tag	Ensures proper scaling on mobile
Use border-collapse	Improves table look	border-collapse: collapse;
Add padding	Improves readability	padding: 0.5rem 1rem;

✅

Key Takeaways

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

Set max-width: 100% on the container to prevent overflow beyond the viewport.

Avoid fixed widths on table columns to keep the layout flexible.

Include the viewport meta tag for proper scaling on mobile devices.

Use padding and border-collapse for better table readability and style.