How do I show content in tables on my responsive site?

For those marketing landing pages, articles with data in a table, and other miscellaneous pages that need to display tables, a responsive site can present some layout issues as the old school way of handling tables falls down.

This article is useful if you find any of the following:

  • You've added a table and now the page looks "bad" on tablet and mobile screens.
  • The entire page "broke" after the table was added.

Below is guidance from our team on how to make your tables look great on your responsive site.

A table with no set fixed width is fluid to a point by default — meaning the table will shrink based on the device width, unless its content is too wide. However, with most tabular data or other table layouts this will squish the data to a point that it is no longer readable, or cut off any excess width. There are two options to work around this problem: a simple version for general table use, and a more robust responsive table solution developed by Filament Group called Tablesaw.

Before we dive in, let’s first review valid Table markup. To prevent layout problems with your table or site it’s important that you are using proper and valid table markup. We recommend you review this documentation about the proper use of a table and the markup: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

Here’s one example of valid table markup:

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td></td>
       <td></td>
     </tr>
   </tbody>
</table>

Note: In order for a table to be responsive, there can be no set width on the table element other than a width of 100%.

The Simple Version

This may need to be enabled for your site.

This option works by adding the header (the th element) label to the left of each row in the table body. To use the simple version you will need to add a class to your table, named “rwd-table", as shown on the top row below. There is then a HTML data attribute — matching the string in the associated TH element — added to each TD element. Here is the example table markup:

<table class="rwd-table">
  <thead>
   <tr>
     <th>Movie Title</th>
     <th>Genre</th>
     <th>Year</th>
     <th>Gross</th>
   </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="Movie Title">Star Wars</td>
      <td data-th="Genre">Adventure, Sci-fi</td>
      <td data-th="Year">1977</td>
      <td data-th="Gross">$460,935,665</td>
    </tr>
    <tr>
      <td data-th="Movie Title">Howard The Duck</td>
      <td data-th="Genre">"Comedy"</td>
      <td data-th="Year">1986</td>
      <td data-th="Gross">$16,295,774</td>
    </tr>
    <tr>
      <td data-th="Movie Title">American Graffiti</td>
      <td data-th="Genre">Comedy, Drama</td>
      <td data-th="Year">1973</td>
      <td data-th="Gross">$115,000,000</td>
     </tr>
   </tbody>
 </table>

Advanced Version using Tablesaw

Tablesaw is a set of jQuery plugins for responsive tables. This includes the base CSS styles to achieve the effect. Your site currently has Tablesaw enabled; it is activated when the right class names and structure are applied.

There are several options in Tablesaw to configure your table layout. There is Stack, Toggle, and Swipe, as well as many other configurable options. You will need to have a class of “tablesaw” on the table for it to be recognized by our code to include the tablesaw JS on the page. See the documentation for the markup you will need to include to use the Tablesaw responsive solution: https://github.com/filamentgroup/tablesaw/blob/master/README.md

To access the HTML for the table on your page to make the above updates:

Edit in the HTML in the Body of the page or article.

Or click Edit in WYSIWYG editor, and then click Source.