Responsive Web Design:

How to create a responsive 100% width table

Summary

This article explores multiple methods to create responsive tables with 100% width using CSS and HTML. It includes practical code examples for flexible (CSS Grid and Flexbox) and overflow-based solutions with and without CSS media queries.

Published:

2023-10-15

Updated:

2025-03-14

Reading time:

03:50

Author:

Jonas Jared Jacek

Tags:

html, css, design, web development

License:

CC BY-SA 4.0

Permalink:

How to create a responsive 100% width table

Introduction #

Making tables responsive can be challenging, especially when dealing with large datasets and/or limited screen space. In this article, you will learn multiple methods to create responsive tables with 100% width using Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS).

Each method includes practical code examples to help you implement these solutions in your projects.

Method 1: Using overflow-x: auto for horizontal scrolling #

One of the simplest ways to make a table responsive is to allow horizontal scrolling when the table exceeds the width of its container. This approach is particularly useful for tables with many columns.

HTML structure #

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>

CSS styling #

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

table {
  width: 100%;
}

In this example, the overflow-x: auto property ensures that the table container will scroll horizontally if the table content overflows. The table itself is set to 100% width to fill its container.

This method will not work if you use, e.g. Markdown tables. In Markdown documents it will only work if the tables are pure HTML.

Method 2: Using CSS Grid for responsive layouts #

CSS Grid can be used to style traditional HTML table elements (<table>, <tr>, and <td>) in a responsive way. This approach maintains semantic HTML while allowing for flexible layouts. By defining grid columns dynamically, you can ensure that the table adapts to different screen sizes.

HTML structure #

<table class="grid-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

CSS styling #

.grid-table {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid-table thead,
.grid-table tbody,
.grid-table tr {
  display: contents; /* Makes the table rows part of the grid */
}

Here, the HTML uses standard table elements (<table>, <thead>, <tbody>, <tr>, <th>, and <td>), ensuring semantic correctness.

The display: grid property is applied to the <table> element, and grid-template-columns is used to create flexible columns with auto-fit and minmax.

The display: contents property is applied to <thead>, <tbody>, and <tr> to make them part of the grid layout without disrupting the table structure.

The columns will automatically adjust to fit the available space, and the table will remain readable on smaller screens.

This method is only useful for tables with very few columns and contents.

Method 3: Using Flexbox for flexible table layouts #

Flexbox is another CSS layout module that can be used to create responsive tables. It allows you to align and distribute space among items in a container.

HTML structure #

<table class="flex-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

CSS styling #

.flex-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.flex-table thead,
.flex-table tbody {
  display: flex;
  flex-direction: column;
}

.flex-table tr {
  display: flex;
  width: 100%;
}

.flex-table th,
.flex-table td {
  flex: 1; /* Distributes space evenly */
}

This method also uses standard HTML table elements (<table>, <thead>, <tbody>, <tr>, <th>, and <td>), ensuring semantic correctness.

The display: flex property is applied to the <table>, <thead>, <tbody>, and <tr> elements to create a flexible layout.

The flex: 1 property ensures that table cells (<th> and <td>) distribute space evenly within each row.

The columns will automatically adjust to fit the available space, and the table will remain readable on smaller screens.

This method is only useful for tables with very few columns and contents.

Method 4: Using media queries for breakpoints #

Media queries allow you to apply different styles based on the screen size. This method is useful for creating tables that change layout at specific breakpoints.

HTML structure #

<table class="responsive-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

CSS styling - option 1 #

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

@media (max-width: 600px) {
  .responsive-table {
    display: block;
  }
}

thead tr {
  position: sticky;
  top: 0;
  z-index: 2;
}

In this example, the table layout changes on screens smaller than 600 pixels. The table headings are set to position: sticky; so they follow the user.

CSS styling - option 2 #

.responsive-table {
  width: 100%;
}

@media (max-width: 600px) {
  .responsive-table thead {
    display: none;
  }

  .responsive-table tr {
    display: block;
    margin-bottom: 10px;
  }

  .responsive-table td {
    display: block;
    text-align: right;
  }

  .responsive-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

With this option, the table headers are hidden, and each cell is displayed as a block element with a label.

This method also uses standard HTML table elements (<table>, <thead>, <tbody>, <tr>, <th>, and <td>), ensuring semantic correctness. Both CSS styling options ensure the table is 100% in width and scrollable on the x axis (overflow-x: auto;).

Personally, I find the method of using media queries for breakpoints, in conjunction with horizontal scrolling and sticky table headings, the best option. It seems the most user-friendly solution, while keeping a table as intact as possible.

Further readings #

Sources and recommended, further resources on the topic:

• MDN Web Docs: CSS Grid Layout
• MDN Web Docs: overflow CSS shorthand property
• MDN Web Docs: Using media queries
• W3C: WAI Tables Tutorial

Author

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/responsive-full-width-table">How to create a responsive 100% width table</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>