Displaying Tables In Responsive Designs

1/25/2013  By David

Responsive design is a beautiful thing. It allows a single website to be accessible on any device from mobile to wide-screen desktop. That means most sites don't need a second website with different content just for mobile. If you want a mobile website, responsive design is far less expensive, more scalable and a much easier to maintain than two separate websites.

Responsive design is where the site layout adjusts and adapts to the screen size. Text can change size for easy reading. Images can resize to fit the screen. But it isn't perfect. Tables don't resize well.

The Problem

There isn't much of a problem if the table is tall and skinny. Two or even three columns may fit on a phone without the need to side-scoll. But if a table is wide, it can break the layout of the page. There's only so much text you can fit across the screen of a phone.

Partial Solutions

Several people have created jQuery solutions to deal with tables on phones. There is a great round up of these maintained over at CSS-Tricks. Most are pretty good. But none will work well in all situations.

Some require a fair amount of effort. The code required is pretty easy for a front-end developer, but certainly not something the average client would be able to do. So, any of these options would require developer time and, therefore, money whenever a new table was needed or an existing table updated.

A Much Simpler Solution

Regardless of how you display a table on a phone, the user will have to swipe, scroll or pinch-out in order to read the entire table. It is impossible to display the entire table on a phone at once. So, why mess with the table layout at all? Why not use a standard HTML table on devices where it will fit on a web page and, when it doesn't fit, put the table on a downloadable PDF.

The downside with this solution is that for each table (and each time you update a table), you need to create both the HTML table and the PDF. However, most of the time you probably already have the table in PDF format, or at least in Word and you can save as a PDF.

By using responsive design, we can display the HTML table whenever it fits. If it doesn't fit on a phone, we can set the table to not display. In place of the table, we can display a link to download the PDF. This link could be displayed only on a phone. Or, you could always display the link. This would allow users to download a PDF copy of the table any time.

With this method, your table is always displayed exactly the way you want. It is accessible to the vast majority of users (most smart phone devices can load PDFs). And the table does not affect the layout of your site on small screens. Using this technique is also faster to set up and easier to maintain. It took about two minutes to set this up for one of our clients. Try that with one of the jQuery options.

Latest From The Blog

Recent Posts

  • Responsive design is where the site layout adjusts and adapts to the screen size. Text can change size for easy reading. Images can re-size to fit the screen. But it isn't perfect. Tables don't re-size well.

  • When you’re writing for your website, keep in mind that many of the writing guidelines used for print will no longer be helpful to you. People take in material on a computer screen differently than they do on a newspaper cover or in a pamphlet.

  • Search Engine Optimization is vital to the success of any website. However, most Content Management Systems do a poor job at SEO, and can hurt your ranking capabilities. Here is a list of features that should be available in any CMS to benefit your SEO.