10+ Solutions for Responsive Data Tables

Having trouble fitting your tables into a responsive site? They look great on a desktop layout, but look miserable on mobile.

Here I will show a basic solution I have used, followed by a list of other plugins and tools you might want to use.

Retro-fitting Old Table Markup

First remove any fixed widths from your HTML.

Before:

 <table width="540">
  <tr>
    <td width="300">Header 1</td>
    <td width="60">Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

After:

 <table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

The width attribute is deprecated – better to let the browser size the columns. If you don’t know much about tables, have a read through this massive guide to tables at CSS-Tricks.com.

Basic CSS Styling

First add some padding and borders.


table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #bbb;
}
td, th {
    border-top: 1px solid #ddd;
    padding: 4px 8px;
}

Then maybe some striped rows.


tbody tr:nth-child(even) td {
    background-color: #eee;
}

Adapting to Mobile-sized Layout

As the viewport gets smaller, the table width will shrink. However depending on how many columns you have – the table which reach a minimum size. By default, the browser will wrap text in each cell, but on a small width the table will not fit, and the table will extend out to the right of the viewport.

A Quick Hack

If you have a large site and you cannot fix each table, you could allow the table to horizontal scroll, without breaking your layout. In the CSS set the table to display:block; and set overflow-x: to auto; – You may want to use a media query to only do this for small devices.


@media screen and (max-width: 640px) {
	table {
		overflow-x: auto;
		display: block;
	}
}

Note: It’s better syntax to wrap the table in a DIV that has overflow-x: scroll; – but this means changing each table in your site.

Here’s what we get (this is the amount of caffeine in Starbucks coffee via Caffeine Informer). Note that if you have a table that has only a few columns, display: block means they will not resize fit across the full width of the table (if the table is set to 100% width).

NOTE: These examples are intended to be viewed on desktop. If you are reading this article on a mobile device, then you will be seeing my own responsive table solution being applied (this applies to all tables on my blog).

DESKTOP

Beverage Short (8 oz) Tall (12 oz) Grande (16 oz) Venti (20-24 oz) Trenta (31oz)
Brewed Coffee 180mg 260mg 330mg 415mg
Brewed Decaf Coffee 15mg 20mg 25mg 30mg
Caffè Americano 75mg 150mg 225mg 300mg

MOBILE (scroll to the right)

This is what happens in mobile (320px wide). The user can swipe right and left to horizontal scroll the table.

The trouble is, the user has no indication that they can swipe to the right.

Beverage Short (8 oz) Tall (12 oz) Grande (16 oz) Venti (20-24 oz) Trenta (31oz)
Brewed Coffee 180mg 260mg 330mg 415mg
Brewed Decaf Coffee 15mg 20mg 25mg 30mg
Caffè Americano 75mg 150mg 225mg 300mg

A Better Solution

If you resize this page (or you are viewing it on a mobile device), you will notice the tables will convert to a mobile optimized version (as in the image below).

vert-table

Here, I’ve combined the table cell data with its column header.

See exactly how I did this here. (focused on WordPress)

Now to other much more powerful options…

1. Footable – jQuery

respt1-d

Mobile - 2nd row clicked.

Mobile – 2nd row clicked.

This excellent plugin allows will hide columns of your choosing. When the row is clicked (or tapped) the columns will fold out below the row.

I’ve used an early version of this on Caffeine Informer, and it works well. More recent versions have substantially more features added.

  1. Give your tables the appropriate data attributes (which columns should be hidden by default).
  2. Ensure the breakpoints are correct (default 480px and 1024px).
  3. Call the footable() function for the appropriate tables.

Source
Demo and Docs

 2. Foundation Zurb – Lock first column

respt2-d

Mobile - first column is locked.

Mobile – first column is locked.

The solution from the Zurb framework is to lock or pin the first column and make the rest of the table scrollable.

To accomplish this they use a small piece of jQuery to manipulate the DOM, and some CSS.

Demo

Also see an interesting tutorial on how to add visual cue when the table is going to scroll: design4lifeblog.com/responsive-tables/ — site seems to have disappeared – James.

3. Stacktable

respt3-d

Mobile - everything is one column.

Mobile – everything is one column.

This piece of jQuery will take a table and turn it into one long column of data.

Demo
Source

4. Responsive Tables

respt4-d

respt4-m

Mobile – Fonts are scaled

This rather intriguing jQuery script will scale font size of the table according to data attributes.

In the above example, the table tag contains two attributes data-max="30" and data-min="11" indicating a minimum and maximum pixel font size.

Demo

5. Filament Group – Tablesaw

swipe-minimap

This jQuery solution offers all kinds of different options for table display.

fgmode-switch

From selectable columns, to swipable columns. As well as prioritizing columns.

There’s a lot of different options in their github repository. This is truly the kitchen sink of responsive tables.

Source and Demo

6. TablePress – WordPress

respt6-d

respt6-m

Mobile view, header column is locked.

TablePress is a WordPress plugin that utilizes the powerful Datatables jQuery plugin. Datatables is one of the most feature-rich plugins for tables (sorting, filtering, paging, etc).

TablePress has a responsive extension which turns the table on its side, locking the header column in place. Datatables.js is very powerful, but does add considerably to page weight.

Demo
Responsive Extension

7. ngResponsiveTable

respt7-d

Mobile - data is presented vertically.

Mobile – data is presented vertically.

This small jQuery script will turn each row into its own vertical list. Rather than manipulate the DOM (by adding and removing table cells), it puts the header info as a data attribute (data-content) into each td element. The stylesheet then displays this using content: attr(data-content). Quite a clever idea.

Tutorial
Demo

8. Codepen by Charlie Cathcart

This clever example uses CSS to accomplish the save as previous but without any JavaScript.

Demo: Codepen

9. Codepen (Dudley Story)

This uses a short (non-jQuery) Javascript to create data attributes into table cells. Then utilizing a CSS media query takes the attributes to format a mobile display.

Desktop layout

Desktop layout

Mobile

Mobile

Nice work.

Demo: Codepen

10. Codepen (Geoff Yuen)

No Javascript, but requires data attributes to be entered into each cell.

resp11d

Desktop Layout

Mobile LAyout

Mobile Layout

Demo: Codepen

More…

James makes websites and the odd app.
Filed under Responsive Design
Updated: July 7, 2016

56 Comments

  1. You get to the Mobile Friendly segment of your article and show a “desktop” version of a table then show an “alternative mobile layout” where the column headers stack with column content inbetween — then start into your List of 10 without any information about what you did to get the “desktop” version to function as it does. Did you use one of the 10 options below it ? Or did you use the CSS setup you started above it ? I’m seeing some weirdly added functions in your code and when I have time I can take it apart to figure it out on my own — but you stop short and are essentially wasting folks time who are looking for a tutorial on how to build out responsive tables by NOT finishing your article properly.

    You essentially build up an explanation for what you are trying to accomplish — accomplish it and then fizzle out and drop off before you conclude your tutorial without any elaborating — then go right into the List of 10.

    Tutorial FAIL. Not sure why everyone else here is praising you.

    • Thanks for the comment. I revisited the post, and what you say makes sense. I’ve rewritten some of it, and also linked off to a newer post:

      http://exisweb.net/responsive-tables-in-wordpress

      In this post I go into a lot of detail about how I implement responsive tables on my own sites.

  2. nice work, but i want to more variation in mobile device

  3. Great article, I wish you have show an example with responsive table and fixed header and 1st column, where header have few “colspan” (few columns have 3 sub-columns) and rows consist of “rowspan” (first row is consist of two rows). I saw some examples but no one support nice look when these features are implemented. Can you please show to us such example? Thanks.

  4. Great article ..it is useful.thanks

  5. how to make responsive table with colspan and rowspan ? please make a sample to me

  6. Hi James thanks for an extensive choice for tables, are there any responsive tables that cover’s a pedigree or a 3 generation genealogy table?

    cheers
    pete

  7. +50 thanks a million!

  8. Great article! Found some good plugins here. I just wanted to tell people about Data Tables (https://www.datatables.net/). It’s a great plugin for everything tables. The extension “Responsive” makes certain columns disappear when screen gets small and creates a + button that gives you a dropdown with all the hidden data. It works kind of like Footable, but it has a whole lot of other functionality also.

    • Excellent solution. Would be great to see some user testing on whether users interact with sidescrolling tables. But I’ve never come across anything.

  9. Re: MOBILE (scroll to the right) – “… the user has no indication that they can swipe to the right”

    While there is nothing to indicate the swipe to side I believe this is a learnable solution and thus good UX. Swiping up, down, left and right is the ubiquitous method of finding out how mobile web sites and apps work.

  10. Thanks for the great resource! I have been looking around for solutions while redesigning a complex table to be responsive, and this list gives me a great start. I will certainly use it for reference and refer others here as well.

    -Kim
    amalgamize.com

    • That’s great. I must do a follow up soon.

    • Nice work and well done.

    • I liked that solution, but didn’t like the idea of all the extra markup when creating the table.

      • If we were generating it server-side I would be right there with you (for CPU and bandwidth considerations), but because angular is having it happen client-side, I’m less concerned.

  11. Amazing article. I’ve been looking for something like this for a looooong time. Cheers for this sum up

  12. Hi, that first coffee table (!) works well from an accessibility perspective. On the iPhone VoiceOver reads the content as a table and you can use gestures to jump to the start of each of the 3 rows.
    Some of the other designs break the table structure.

  13. Look like you’ve got an extra ; here `padding: 4px; 8px;`

    • Thanks, typo fixed.

    • This is something I made myself. I’ve updated the post to mention it, and I’m in the middle of writing a new post to outline how to do this, with minimal CSS and JS, and without jquery.

  14. “Foundation Zurb” don’t works with complex tables. After applying the script the height of the columns does not match the original height and needs additional JS.

  15. Thank you! Excellent descriptions and examples.

  16. This is an excellent article. Thank you very much for the responsive table CSS-Code. I think the best way to go is the pure CSS-variant without any Javascript. By the way: I think the table looks much better without the td/th-border.

  17. You missed responsive datatables?

    • I use datatables in a project. It’s the most powerful jQuery plugin for tables you can find.

      However it does not necessarily support responsive out of the box (at least not in v1.10). There a lots of solutions to be found in the datatables forums, including this one: https://github.com/Comanche/datatables-responsive

  18. Great.

  19. Great resource. Thanks!

  20. Wow! I just saw that mine solution came up here … Great review and thanks for the inclusion! 🙂

    • No problem, thanks for sharing your code.

  21. The design4lifeblog page is not there anymore. Does anyone know any other whereabouts of it?

    • You’re right, either the domain was hijacked or the author is AWOL. Alas the page is not even on web.archive.org.

      From memory it showed an overlay or icon that indicated a table could scroll.

      • Hi James – I am not tech savvy so I don’t understand much of what you explained:) My question is simple, can you design an old classic asp, table design site into web responsive design?
        http://www.CrownJewelers.com
        Anyone is welcome to take a look and send me a quote.
        Thanks

  22. Couldn’t agree more. Nice breakdown on the options of each method. A+ article.

  23. Cheers for this post James it has cut out a load of searching for a decent responsive plugin to use with optimisepress 2. Great post

Add a Comment

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