Creating Responsive Tables

To make a large HTML table responsive on smaller screens, wrap the table in a div container and apply the CSS property overflow-x: auto; to that wrapper.

Tables are notoriously difficult to display on mobile devices because they require a rigid grid. If you have too many columns, the table will either break your website layout or squash the data until it's unreadable.

The standard, most user-friendly solution isn't to change the table itself, but to allow the user to swipe horizontally just for the table area.

The Wrapper Method

First, wrap your table in a simple div element. We will give it a class so we can target it with CSS:

Then, apply the scrolling rule to the class in your CSS:

Adding overflow-x: auto; tells the browser: "If the content inside this div is wider than the screen, hide the extra content, but show a horizontal scrollbar so the user can still reach it".

Preventing Text Wrap

Sometimes, before a table triggers the scrollbar, it will attempt to squeeze the content by wrapping the text inside the cells onto multiple lines, making the table very tall and ugly. You can prevent this using the white-space property on your cells:

Full Working Example

In the following example, try resizing your browser window (or using a mobile device). You will notice that as the screen gets smaller, a scrollbar appears at the bottom of the table, while the rest of the page remains unaffected.

<!DOCTYPE html>
<html>
<head>
<title>Responsive Table Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
  }
  .table-wrapper {
    overflow-x: auto;
    /* Adding a subtle border/shadow to the wrapper to indicate a scrollable area */
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
  table {
    width: 100%;
    /* min-width forces the table to be wide enough to require scrolling on small screens */
    min-width: 600px; 
    border-collapse: collapse;
  }
  th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
    /* Prevent text from wrapping so the table demonstrates overflow clearly */
    white-space: nowrap; 
  }
  th {
    background-color: #333;
    color: white;
  }
  tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>
</head>
<body>

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email Address</th>
        <th>Phone Number</th>
        <th>Date of Birth</th>
        <th>Account Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ainsley</td>
        <td>Walker</td>
        <td>ainsley.w@example.com</td>
        <td>555-0198</td>
        <td>Jan 15, 1990</td>
        <td>Active</td>
      </tr>
      <tr>
        <td>Kelley</td>
        <td>Stone</td>
        <td>k.stone85@example.com</td>
        <td>555-0234</td>
        <td>Mar 22, 1985</td>
        <td>Pending</td>
      </tr>
      <tr>
        <td>Brady</td>
        <td>Myers</td>
        <td>brady_m@example.com</td>
        <td>555-0122</td>
        <td>Nov 08, 1992</td>
        <td>Active</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

View Output Full Screen Preview