5 Ways to Create Responsive CSS Tables (Simple Examples)

Welcome to a tutorial on how to create mobile-friendly responsive CSS tables. When it comes to creating responsive web pages, tables are one of those “unfortunate” things in HTML. Even though there are a ton of responsive solutions for images, videos, text, and layout – Tables are the only tricky ones to deal with.

That covers the basics, but let us walk through more examples in this guide – Read on!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist | Example on CodePen

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

 

TUTORIAL VIDEO

 

METHOD 1) SET 100% WIDTH

<style>
.full { width: 100%; }
</style>
 
<table class="full">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

Column 1	Column 2	Column 3
Column 1	Column 2	Column 3

This is the easiest way to create a “responsive table”. Setting width: 100% will make the table stretch horizontally across the container, but it suffers from a possible problem – On portrait orientation of small devices, the table is going to look extremely squished.

 

 

METHOD 2) WRAP TABLE IN OVERFLOW CONTAINER

<style>
.twrap {
  width: 100%;
  overflow-x: auto; 
}
</style>
 
<div class="twrap">
  <table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </tr>
  </table>
</div>

To prevent a squished table, we can wrap it in a <div style="overflow: auto"> container. But of course, it comes with the price of an “ugly scrollbar” and some table columns may not be immediately visible.

P.S. We can also set max-height: N on the container to limit it from getting too tall… But that will be 2 ugly scrollbars.

 

 

METHOD 3) HIDE COLUMNS

<style>
.hidder { width: 100%; }
@media screen and (max-width:768px) {
  .hidder th:nth-child(2),
  .hidder td:nth-child(2)
  { display: none; }
}
</style>
 
<table class="hidder">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

Column 1	Column 2	Column 3
Column 1	Column 2	Column 3

Personally, I think this is a more elegant solution. When it comes to smaller screens, we use the media query @media to hide the columns that are not critical. The table still fits nicely on the screen and looks less cluttered. But the pain of this method is having to define which columns are important, and it is literally useless if “all columns are important and have to be shown”.

 

 

METHOD 4) WRAP CELLS INTO NEW ROWS

<style>
.gridtable { width: 100%; }
@media screen and (max-width:768px) {
  .gridtable tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 3px;
    margin-bottom: 3px;
  }
}
</style>
 
<table class="gridtable">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

Column 1	Column 2	Column 3	Column 4
Column 1	Column 2	Column 3	Column 4

Some people may not fully agree with this method, but this is a rather genius solution. On the small screen sizes, we use the media query @media to turn the rows into a grid layout .gridtable tr { display: grid }. Thereafter, set the max number of cells per row grid-template-columns: repeat(2, minmax(0, 1fr)).

The cells will automatically wrap into new rows, making things a little more legible. But this is not a perfect solution either – Tables with a lot of columns are going to look extremely confusing with a lot of extra rows.

 

 

METHOD 5) USE A GRID CONTAINER AS A TABLE

<style>
/* (A) ON BIG SCREEN */
.thegrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 3px;
}
 
/* (B) ON SMOL SCREEN */
@media screen and (max-width:768px) {
  .thegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
</style>
 
<div class="thegrid">
  <!-- HEAD -->
  <div class="head">Column 1</div>
  <div class="head">Column 2</div>
  <div class="head">Column 3</div>
  <div class="head">Column 4</div>
 
  <!-- ROWS -->
  <div class="cell">Column 1</div>
  <div class="cell">Column 2</div>
  <div class="cell">Column 3</div>
  <div class="cell">Column 4</div>
</div> 

The modern-day display: grid – Put in a little bit of creative juice, and we can use it to create lists and tables. Yes, this final example is not using the “traditional” <table>, but a <div style="display: grid">.

 

 

WHICH IS THE “BEST METHOD”?

I use the laziest method most of the time, just add width: 100% to tables. But whatever works for you is the best method, you can even combine multiple methods together – Set width: 100%, and hide some columns on small screen as required.

 

LINKS & REFERENCES

• Using media queries – MDN
• 5 Practical Solutions to Make Responsive Data Tables – Michał Jarosz