Tables in responsive design

Written by Rick Powell on 10th December 2013

(Last updated 5th May 2016)

14 comments
Tables in responsive design

I recently came across an issue that involved scaling down a large table of content to fit into a mobile device view. This article highlights the implications of using default tables within responsive design and suggests different methods to use.

When a default table is viewed on a mobile device, it pushes out the widths of the site allowing the user to scroll horizontal. Although this allows the user to view all the table content, it does not do your responsive site any justice.

Examples of default tables

Table Viewed on a large screen:

Table Viewed on a mobile device:

An option could be to hide selective information when viewed in the mobile view, however the user should not miss out on content just because they are using a mobile device. To help decide how your table should scale down, its worth thinking about who or what the table is designed for.

Points to consider

  • How much data does your table contain

  • What platform will the tables be created on (eg. CMS, Static HTML site)

  • How will the tables be created (eg. CMS table builder, hand coded )

  • Who will be creating the tables (Does the user have any technical skills or not)

  • Does the user have access or the ability to write CSS or JavaScript  

Various solutions

Here are various examples demonstrating different approaches fitting a table into a responsive layout. These methods change the display of the table using a combination of CSS and JavaScript.


PDF option

You can save out an Excel document as a pdf then upload it to your site. When the website is viewed on a large screen the table will be visible. When the site is viewed on a mobile device the table will display hidden and a link to the pdf document will show instead. When the link is clicked the user will be directed to a page where they can view the pdf file. This change can happen using a simple CSS media query to hide the original table and display the pdf link.

Pros:

  • Easy to apply to the site
  • Added bonus to download the file
  • Only need a simple CSS media query to hide the original table and display the pdf link

Cons:

  • Takes the user away from the page
  • It is possible the link will not get clicked on

Horizontal scroll container

You can allow the user to horizontally scroll the table by placing it inside a container with overflow: auto; and overflow-y: hidden;. Once the page width becomes smaller than the table, the container will mask the table to keep it within the page width. The user can then scroll left and right with their finger to view the table contents. This can be easily applied using a simple CSS media query.

Pros:

  • Easy to apply with CSS
  • Keeps the user on the page
  • Does not affect the page width

Cons:

  • User may not be aware they can scroll horizontally
  • Difficult to view the table content all at once
  • Requires the user to scroll horizontal

Pie chart option

This option takes the table data and converts it into a pie chart. This is a clever approach but pretty limited for displaying large table data in a user friendly manner.

Table Viewed on a large screen:

Table Viewed on a mobile device:

Pros:

  • Compacts the data to fit on the page

Cons:

  • Table content is difficult to translate
  • Limited to how much content can be viewed
  • The table becomes a pie chart

Link: http://tinyurl.com/7qtzet9


Selectively displaying data option

This option allows the user to select which data to view in the table through a drop down menu. Although this is a good solution, I feel the user experience is limited on a mobile device. It does not solve the problem of viewing all of the data at once.

Table Viewed on a large screen:

Table Viewed on a mobile device:

Pros:

  • Compacts the table down to fit inside small screens
  • Allows user to choose what they want to view

Cons:

  • Does not fit on the screen when all data is viewed
  • It could be annoying selecting box’s to view content

Links: http://tinyurl.com/lvkknne (Demo)

http://tinyurl.com/7v7r3uf (Source)


Horizontal scrolling option 2

This is a good solution for keeping the table format the same as when it is viewed on a larger screen. When viewed on a small screen the table splits into two horizontal scrolling columns. This allows the user to pan left and right using their finger to view the table data.

Table Viewed on a large screen:

Table Viewed on a mobile device:

Pros:

  • Suitable for large table content
  • Allows user to pan separate columns

Cons:

  • Uses JavaScript Polyfill to activate the change at a set width
  • Requires the user to scroll horizontal

Link: http://tinyurl.com/m53zva7


CSS responsive Table

This options seems to be the best option which can easily be applied across different platforms. It uses CSS media queries to reformat the table into a mobile friendly view. All of the data remains readable and it eliminates the need to scroll horizontally. See Chris Coyier’s comment located in the link below, he explains how all the data can be kept in the HTML.

Table Viewed on a large screen:

Table Viewed on a mobile device:

Pros:

  • Rebuilds the table to fit into mobile view
  • No horizontal scrolling
  • Creates easy to read table
  • Does not need Java Script

Cons:

  • May lead to a long page of contents
  • May not work well with complicated table content

Links: http://tinyurl.com/6cgqd8p (Source)

http://tinyurl.com/85e9cso (Demo)

http://tinyurl.com/qcrl9mf (Chris Coyier’s comment to keep the content in the HTML)


So which type of responsive table to go for?

Deciding which approach to take all depends on your specific projects need. There isn’t a right or wrong solution.  It really just depends on how you want the responsive result to look. I personally find the last example most appropriate for my needs but you may not find this. It all depends on what you are trying to achieve. See the checklist below to help decide which table solution to use.


Checklist to help choose the best table for your

Type of TableCSSJava ScriptSuitable for large table contentUsability rating out of 10
PDF optionYesNoYes4
Horizontal scroll containerYesNoYes7
Pie chart optionYesYesNo2
Selectively displaying data optionYesYesNo4
Horizontal scrolling option 2YesYesYes7
CSS responsive tableYesNoYes9

May 2014 Update

Just a little update to help make your life easier. Here is a group of plugins that will convert your tables into response tables.

Check it out - https://github.com/filamentgroup/tablesaw


May 2016 Update

Now that the flex-box property is well supported there are a few techniques that use this. However, as far as we’re aware, all of these techniques require you to change the mark-up so that it doesn’t use the table element. To keep the article short, we haven’t included a detailed breakdown of these techniques but you can find out more about flex-box responsive tables here. Please let us know in the comments if you think we should include these.

There’s a great collection here of examples on codepen and an excellent run down of tables in general over on CSS tricks.

This article was posted in Design, Quick Tips by Rick Powell

Comments

Very good blog post. I would love to see how you tested long sentences, paragraphs, linked content, html, image icons, dates, with filters all in a single responsive table.

Matt Lawson14/12/2013 13:40

Thank you for the comment Matt. These are very good points which we will be looking into in the future.

Rick17/12/2013 11:11

Thank you very much! In this post you helped me solve my problem with the tables!

Jonny Cuchk21/05/2014 11:16

Nice very nice. Thanks

Emily10/11/2014 04:57

Thank you! for that.

Developer21/05/2015 08:40

Really such a Great article
thanks for your time and effort :)

Ahmed Mahmoud13/06/2015 13:48

Thank you very much for this useful and clearly arranged collection of options :-)

Peter Hofer15/07/2015 13:36

Very Helpful List i also found a good tutorial on how to create responsive table using CSS on www.talkerscode.com i think that tutorial is pretty useful to create responsive table with pure css here is the path you there http://talkerscode.com/webtricks/create-a-full-responsive-table-using-html-and-css.php

welma04/08/2015 09:09

Superb blog

Linaa Roy31/08/2015 10:45

Thank you very much for this useful and clearly arranged collection of options :-)

Linaa Roy31/08/2015 10:46

Great value here. Thanks!

Lucas22/01/2016 06:25

This article has been really helpful to me. Thank you for writing and sharing your knowledge with us.

Nathalie10/02/2016 18:50

Indeed worth reading with demo application

Tariq05/03/2016 19:53

Nice one! But i tried another different simple responsive method check out the below link

http://www.sanwebcorner.com/2016/12/create-simple-and-perfect-responsive.html

sandilyan07/12/2016 06:21

Post a comment

*
*

Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.