Responsive Table Split for Mobile

One of the issues we are facing while making Willmaster.com into a responsive site is deciding what to do with wide tables — tables too wide to fit into most mobile devices.

The solution, we found, is to make two versions of the table.

For responsive wide tables in web pages, create one version for desktop and laptop computers. Create another version for mobile phones and tablets. Use CSS to responsively switch between the two.

The CSS declares the computer table version as display:block; and the mobile version as display:none;. A @media selector with a max-width declaration reverses the display property values.

When you look at the CSS code (further below), you'll see it's relatively simple to implement.

Depending on your table, the challenge may be creating the mobile version.

Below is an example of a wide table for computers and the two narrow tables it was split into for mobile devices.

The wide table was first published in a blog post way back in year 2006. It was designed to fit into the then-width of the content column.

Some devices will let you scroll the div itself when the content extends beyond the right edge. Touch the table and slowly scroll toward the left.

The two narrow tables created for mobile devices each contain the text labels for the rows. It allows the reader to associate the data of the two tables with each other.

Different tables have different requirements. For some, it will be obvious how to create the mobile version. For others, there will be more of a challenge. You may be required to split wide tables into three or more separate narrow tables.

Now that you have your two versions of the table, let me get down to the nitty-gritty and show you how easy it is to responsively publish the correct version of the table.

Here's the code. Notes follow.

<style type="text/css">

#wide-version-of-table { display:block; }
#narrow-version-of-table { display:none; }

@media (max-width:435px) /* The maximum width for the mobile device version. */
{
   #wide-version-of-table { display:none; }
   #narrow-version-of-table { display:block; }
}

</style>

<div id="wide-version-of-table">
[WIDE TABLE GOES HERE]
</div>

<div id="narrow-version-of-table">
[MOBILE VERSION GOES HERE]
</div>

(This article first appeared in Possibilities ezine.)

Will Bontrager