5 Ways to Create Responsive CSS Tables

INTRODUCTION

THE UNFORTUNATE TABLES

Welcome to a tutorial on how to create 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 just not getting as much love.

Staying with a “static table” will probably break your design, since allowing it to span out of the screen will end up with a horizontal scrollbar. But if you restrict the width of the table, the contents will become “squashed”. So how do we deal with tables when it comes to responsive design then? Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

 

PREAMBLE

DOWNLOAD & NOTES

First, here is the download link to all the example source code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

METHOD 1

100 PERCENT WIDTH TABLES

This is one of the easiest ways to build a “responsive table”, and that is to fit it at 100% width. With this, the table will never be wider than the parent container and you will be safe from the nasty horizontal scrollbar.

 

THE HTML & CSS

1-full-width.html
<style>
/* (A) WRAPPER WITH OVERFLOW */
.twrap {
  width: 100%;
  overflow-x: auto; 
}
/* (B) NOT IMPORTANT - FOR DEMO */
.twrap table {
  border: 1px solid #000;
  width: 200%;
}
.twrap table th {
  text-align: left;
}
</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>

 

THE RESULT

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

 

LIMITATIONS

As easy as this “solution” might be, it still has the problem as mentioned in the introduction above – If you have a lot of columns and contents, then this method is going to show a “squished” table on smaller screens; This is not really suitable for display “complicated” tables with a lot of information.

 

 

METHOD 2

TABLE IN OVERFLOW CONTAINER

Need do to maintain a “full-sized” table and not destroy the layout of the entire page? The key here is to put the table into another container with scrollbars.

 

THE HTML & CSS

2-overflow-wrapper.html
<style>
/* (A) WRAPPER WITH OVERFLOW */
.twrap {
  width: 100%;
  overflow-x: auto; 
}
/* (B) NOT IMPORTANT - FOR DEMO */
.twrap table {
  border: 1px solid #000;
  width: 200%;
}
.twrap table th {
  text-align: left;
}
</style>
<div class="twrap">
  <table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
      <td>Column 5</td>
    </tr>
  </table>
</div>

 

THE RESULT

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

 

LIMITATIONS

This works! But of course, with the price of an “ugly scrollbar” and it is kind of hard to navigate on the portrait mode of small screens.

 

 

METHOD 3

HIDING COLUMNS

Personally, I think this is a more elegant solution. When it comes to smaller screens, we hide the columns that are not critical – The table still fits nicely into the screen and will look less cluttered.

 

THE HTML & CSS

3-hide-column.html
<style>
/* (A) HIDE COLUMNS ON SMALL SCREENS */
.hidder {
  width: 100%; 
}
@media screen and (max-width:768px) {
  .tohide { display: none; }
}
/* (B) NOT IMPORTANT - FOR DEMO */
.hidder {
  border: 1px solid #000;
}
.hidder th {
  text-align: left;
}
</style>
 
<table class="hidder">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th class="tohide">Column 3</th>
    <th class="tohide">Column 4</th>
    <th>Column 5</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td class="tohide">Column 3</td>
    <td class="tohide">Column 4</td>
    <td>Column 5</td>
  </tr>
</table>

 

THE RESULT

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

 

LIMITATIONS

This is kind of a cool way to reduce the visual clutter on small screens, but also kind of a pain to decide which are the useful fields and which ones to hide. Of course, if “all columns are important”, then this method will become useless.

 

 

METHOD 4

WRAPPING COLUMNS

This method is kind of a “hack”, a little unorthodox you can say… But this is also another of the better solutions that I have found all over the Internet.

 

THE HTML & CSS

4-wrap-column.html
<style>
/* (A) REARRANGE TABLE ON SMALL SCREENS */
.gridtable {
  width: 100%; 
}
@media screen and (max-width:768px) {
  .gridtable, .gridtable thead, .gridtable tbody {
    display: block; 
    width: 100%; 
  }
  .gridtable tr {
    display: grid;
    width: 100%;
    grid-template-columns: auto auto auto;
  }
}
/* (B) NOT IMPORTANT - FOR DEMO */
.gridtable {
  border: 1px solid #000;
}
.gridtable th, .gridtable td {
  background: #ecefff;
}
.gridtable th {
  text-align: left;
}
</style>
 
<table class="gridtable">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
  </tr>
</table>

 

THE RESULT

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

 

LIMITATIONS

Convert the table row into a grid on small screens and they will automatically wrap/arrange themselves. Some people will probably find this solution “disgusting” or “hack-like”, but hey, it works… I personally don’t think there’s any limitation to this method and find it to be quite a genius solution.

 

 

METHOD 5

GRID CONTAINER

This final method is not quite a table, but still a table… Instead of using the traditional table tag, we use a grid container to create our responsive table instead.

 

THE HTML & CSS

5-grid.html
 <style>
/* (A1) CONTAINER - BIG SCREEN */
.thegrid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  /* OR SPECIFY WIDTH
  grid-template-columns: 50% 25% 25%;
  */
  grid-gap: 5px;
}
/* (A2) CONTAINER - SMOL SCREEN */
@media screen and (max-width:768px) {
  .thegrid { grid-template-columns: auto auto; }
}
/* (B) CELLS */
.thegrid .head, .thegrid .cell {
  padding: 10px;
}
/* (C) HEADER CELLS */
.thegrid .head {
  font-weight: bold;
  background: #ffe4d1;
}
/* (D) DATA CELLS */
.thegrid .cell {
  background: #d1f2ff;
}
</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> 
</html>

 

THE RESULT

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

 

LIMITATIONS

I personally kind of like this solution – It is very clean and flexible. But the CSS grid is not supported in the ancient browsers, so be careful not to use this if you are supporting the older technology.

 

CLOSING

WHAT’S NEXT?

Thank you for reading, and we have come to the end of this chapter on responsive tables. I hope that it has helped you to improve your projects, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *