Contact Us
  • What We Do
  • How We Do It
  • Our Thinking
  • Join Us
  • Our Work
  • Industries
  • Cloud
  • Software Development
  • Quality Engineering
  • DevOps
  • Strategy
  • Experience Design
  • Data & Integration
  • Advisory Services
  • Careers
  • Culture
  • Events
  • Success Stories
  • Partnerships
  • Technologies
  • Professional Services
  • Financial Services
  • Retail
  • Health Care

Making Tables Responsive for Mobile Devices

July 11, 2017 // By James Barrett

Responsive web design has made it simple for developers and designers to realize optimized layouts for multiple screen sizes using one code format.  A lot of components are well suited for this dynamic style, but when it comes to data tables—specifically ones with large amounts of data—providing an optimal user experience on smaller screens proved difficult.

Not anymore!

Thanks to some clever CSS, large data tables can easily be formatted for smaller screens, giving users an excellent mobile experience without sacrificing the ability to view all of the relevant data.  I will be demonstrating two examples in this article, complete with code examples, as well as why these formats are best suited for your mobile data table needs.

First things First: The HTML

Below we have a basic table, with a number of columns.  For the live examples the row data will be duplicated, but this gives us the general layout of most tables, including a header, multiple columns and rows.  A rendered version can be seen here.

An HTML table with truncated data.

Option 1:  Card Format

This first option is great for user data, and borrows heavily from Google Android’s “Material Design” guidelines.  On smaller screens, the tabled data will display as separate cards, repeating the header titles on each line for consistency.  Accomplishing this effect relies on two things: The HTML 5 data- tag, and the CSS :before pseudo class.  The first thing we do is add the data- tag to all of the corresponding <TD> tags:

An HTML table with the data- tag populated

In this static example I have manually copied the header titles into the data- tag.  If you wanted to apply this to a more dynamic data table, you could write JavaScript that auto populates this tag with whatever is present on the corresponding header.

The next step is applying CSS to the table so when it’s viewed at smaller resolutions, the format changes.  We do this using media queries:

A lot of this code is used for formatting and creation of the card, however the most important part is right here:

The CSS pseudo class ( :before ) allows for formatting to occur prior to any content that’s located within the div that the class is applied to.  By using the content property and referencing the data-label we created above, we can call the header tags into the table data tags and keep them on a horizontal access repeating them wherever the corresponding data is.

From there, we hide the original table header, apply some formatting to the cells, including padding to rows, and voila—responsive cards! See a working example here.

Option 2:  Pivot Table

While option one would be great for small bits of user data, no one would want to scroll through hundreds, or even thousands of records in that format.  For those instances, I recommend the use of the pivot table.  Using the same sample code as above, we apply the following CSS:

 

The key properties here are taking the table body (tbody), fixing the width to the designated resolution (max-width:800px), displaying the header information in a vertical list while fixing it to the left, and letting the corresponding data flow underneath it.  A working example can be viewed here.

There are many other ways to format tables responsively, and a lot of great examples on the web.  These two examples are based on Responsive Table Demos, but check out Tablesaw for some unique flavors as well.  Find out what  works best for your current project and keep experimenting!

Categories // Experience Design, Software Development
Tags Responsive Web Design, Tables, Mobile
SHARE:
THE LATEST:
  • APRIL 7, 2021 // blog
    Assertions In Automation Scripts – I Assert That They’re Optional
  • MARCH 31, 2021 // blog
    Tech Consulting Fastcast 15: Product Ownership
  • MARCH 19, 2021 // blog
    Security In Five Bi-Weekly Roundup – 3/19/21
Featured Content:
  • JANUARY 25, 2021 // White Paper
    The Top 7 Technology Trends of 2021

Related Posts

Blog
4 of the Best Topics from Chain React 2019
Learn More
Blog
Creating New Opportunities as Mobile Innovation Lags
Learn More
Blog
Maximizing Mobile Retail Returns
Learn More
Blog
The Case For and Against "Peak App"
Learn More

Ready to speak with our experts?

Have a question?

This field is required
This field is required
This field is required
This field is required

Thanks for Contacting Magenic

One of our experts will be contacting you directly within the next business day.

Return To Home

info@magenic.com+1.877.277.1044

  • Facebook
  • Twitter
  • LinkedIn
  • YouTube
  • RSS Feed

© Magenic Inc.Privacy NoticeTerms & ConditionsSitemap