HTML Responsive Tables

by

HTML responsive tables are tables that can be viewed easily on different screen sizes, including desktops, laptops, tablets, and mobile phones. Responsive tables help users read tabular information without the content becoming difficult to understand on smaller screens.

HTML provides the elements needed to create tables, while CSS makes them more adaptable to different devices. You can use CSS properties such as width, max-width, and overflow-x to improve the display of tables on smaller screens.

In this tutorial, you will learn how to create responsive HTML tables using CSS, with practical examples.

What Is an HTML Responsive Table?

An HTML responsive table is a table designed to remain usable across different screen sizes. It adjusts to the available space or provides a suitable way to access content when the table is too wide.

For example, a table containing student names, subjects, marks, and email addresses might fit comfortably on a desktop screen but require horizontal scrolling on a mobile phone.

You can create a table using the HTML <table>, <tr>, <th>, and <td> elements and then use CSS to make it responsive.

If you need to learn the basics first, read our HTML Tables tutorial.

Why Are Responsive HTML Tables Important?

Responsive tables improve the user experience by making information accessible across different devices.

The main benefits include:

  • Mobile compatibility: Tables remain usable on smaller screens.
  • Better readability: Users can read table content without unnecessary shrinking.
  • Improved accessibility: Well-structured tables help users understand relationships between headers and data.
  • Better layout: Tables are less likely to overflow their surrounding content.
  • Consistent design: Tables work more effectively across different screen sizes.

Responsive table design is particularly useful for dashboards, product comparisons, employee records, pricing tables, and reports.

Basic HTML Responsive Table Example

The simplest way to make a wide table responsive is to place it inside a container with horizontal scrolling.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Responsive Table</title>

  <style>
    .table-container {
      width: 100%;
      overflow-x: auto;
    }

    table {
      width: 100%;
      min-width: 500px;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #cccccc;
      padding: 12px;
      text-align: left;
    }

    th {
      background-color: #0878d1;
      color: white;
    }
  </style>
</head>
<body>

  <h2>Employee Details</h2>

  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Department</th>
          <th>Email</th>
          <th>Location</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Rahul</td>
          <td>Development</td>
          <td>rahul@example.com</td>
          <td>Hyderabad</td>
        </tr>
        <tr>
          <td>Priya</td>
          <td>Testing</td>
          <td>priya@example.com</td>
          <td>Chennai</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>

In this example, the table is placed inside a <div> element with the class table-container.

The CSS property overflow-x: auto allows horizontal scrolling when the table is wider than its container. The min-width: 500px declaration prevents the table from becoming too narrow to read comfortably.

The viewport meta tag helps the page use the device’s actual width on mobile browsers.

HTML Responsive Tables Using Width: 100%

The CSS width: 100% property makes a table occupy the full available width of its containing element.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 10px;
  }
</style>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Keyboard</td>
    <td>₹800</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>₹400</td>
  </tr>
</table>

The table expands to fill the available width. However, width: 100% alone does not guarantee that a table with many columns will fit on a narrow screen. Long content or numerous columns may still cause overflow.

For wide tables, combine a suitable width with a scrolling container.

HTML Responsive Tables Using Overflow-X

The CSS overflow-x property controls what happens when content extends beyond the horizontal boundaries of its container.

The auto value adds horizontal scrolling when necessary.

<style>
  .responsive-table {
    width: 100%;
    overflow-x: auto;
  }

  .responsive-table table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
  }

  .responsive-table th,
  .responsive-table td {
    border: 1px solid #cccccc;
    padding: 10px;
    text-align: left;
  }
</style>

<div class="responsive-table">
  <table>
    <tr>
      <th>Employee ID</th>
      <th>Name</th>
      <th>Department</th>
      <th>Email</th>
      <th>Location</th>
    </tr>
    <tr>
      <td>101</td>
      <td>Rahul</td>
      <td>Development</td>
      <td>rahul@example.com</td>
      <td>Hyderabad</td>
    </tr>
  </table>
</div>

Here, the table has a minimum width of 600 pixels. If the available space is smaller, users can scroll horizontally within the container rather than forcing the entire page to become wider.

HTML Responsive Tables with CSS Media Queries

CSS media queries allow you to apply different styles based on the screen size or other device characteristics.

For example, you can reduce cell padding on smaller screens.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 14px;
    text-align: left;
  }

  @media (max-width: 600px) {
    th, td {
      padding: 8px;
      font-size: 14px;
    }
  }
</style>

When the viewport width is 600 pixels or less, the table cells use smaller padding and text.

Media queries can improve readability, but reducing padding and font size is not always enough for tables with many columns. In those cases, horizontal scrolling or a different mobile presentation may be more suitable.

HTML Responsive Tables with Striped Rows

Striped rows use alternating background colors to make table records easier to distinguish. This styling works on both desktop and mobile screens.

<style>
  .responsive-table {
    overflow-x: auto;
  }

  table {
    width: 100%;
    min-width: 450px;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 12px;
    text-align: left;
  }

  th {
    background-color: #0878d1;
    color: white;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f7fc;
  }
</style>

<div class="responsive-table">
  <table>
    <thead>
      <tr>
        <th>Student</th>
        <th>Subject</th>
        <th>Marks</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rahul</td>
        <td>Mathematics</td>
        <td>92</td>
      </tr>
      <tr>
        <td>Priya</td>
        <td>Science</td>
        <td>88</td>
      </tr>
      <tr>
        <td>Arun</td>
        <td>English</td>
        <td>85</td>
      </tr>
    </tbody>
  </table>
</div>

The :nth-child(even) selector applies a background color to even-numbered rows inside the table body.

To learn more about table appearance, explore our HTML Table Styling tutorial.

HTML Responsive Tables Without Horizontal Scrolling

Some tables contain only a few columns and can fit comfortably on mobile screens without horizontal scrolling. You can use flexible widths and allow text to wrap naturally.

<style>
  table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 8px;
    text-align: left;
    overflow-wrap: anywhere;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Hyderabad</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>Visakhapatnam</td>
  </tr>
</table>

The table-layout: fixed property helps distribute column widths according to the table layout, while overflow-wrap: anywhere allows long text to wrap when needed.

This approach works best for tables with a small number of columns. It may not be suitable for tables containing many fields or long values.

HTML Responsive Tables with Hidden Columns

For some applications, you may choose to hide less important columns on smaller screens. CSS media queries can accomplish this, but hidden data may become unavailable to mobile users unless another way to access it is provided.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 10px;
    text-align: left;
  }

  @media (max-width: 600px) {
    .optional-column {
      display: none;
    }
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Department</th>
    <th class="optional-column">Email</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Development</td>
    <td class="optional-column">rahul@example.com</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>Testing</td>
    <td class="optional-column">priya@example.com</td>
  </tr>
</table>

When the screen width is 600 pixels or less, the email column is hidden.

Use this technique only when the hidden information is genuinely optional. Important data should remain accessible through an alternative layout or interaction.

HTML Responsive Tables and Accessibility

Responsive design should preserve the meaning and accessibility of table data.

Follow these practices:

  • Use <th> for table headers and <td> for ordinary data cells.
  • Use <thead> and <tbody> to organize table sections when appropriate.
  • Add the scope attribute to headers when it helps clarify their relationship to rows or columns.
  • Keep text readable instead of shrinking it excessively.
  • Allow horizontal scrolling when necessary and ensure the table remains usable with a keyboard.
  • Avoid hiding important information without providing another way to access it.

Example:

<div class="responsive-table">
  <table>
    <caption>Employee Salary Details</caption>
    <thead>
      <tr>
        <th scope="col">Employee</th>
        <th scope="col">Department</th>
        <th scope="col">Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rahul</td>
        <td>Development</td>
        <td>₹35,000</td>
      </tr>
    </tbody>
  </table>
</div>

The caption describes the table, and the column headers identify the information in each column.

You can learn more about these elements in our HTML Table Headers and HTML Table Captions tutorials.

Common HTML Responsive Table Mistakes

Avoid these common mistakes when creating responsive tables:

  • Using width: 100% and assuming every table will automatically fit on mobile screens.
  • Forgetting to add overflow-x: auto to a container when horizontal scrolling is needed.
  • Making text too small to read on mobile devices.
  • Hiding important columns without providing another way to access their information.
  • Allowing long text to stretch the page beyond the viewport.
  • Removing table headers and captions that help users understand the data.
  • Testing the table only on desktop screens.

HTML Responsive Table Best Practices

Follow these best practices to create responsive tables that work well across devices:

  • Use width: 100% when the table should fill its available container.
  • Wrap wide tables in a container with overflow-x: auto.
  • Use media queries when smaller screens need different styling.
  • Keep fonts, padding, and spacing comfortable for reading.
  • Use meaningful captions and table headers.
  • Choose horizontal scrolling when preserving all columns is important.
  • Test tables at different viewport widths and with keyboard navigation.
  • Hide optional columns only when users can still access important information.