With responsive design on the rise, it may seem that the days of tables are coming to an end. Well... this doesn't have to be the case! Thanks to the beauty of CSS, it is possible to make any traditional table be compatible with your responsive web design!

This How-to will show you how to create a responsive table for your website! Basically, it should appear as a traditional table on standard screens, and on anything under 760 pixels wide, it should turn into a different format where each row appears as a separate record!

First, take a look at our LIVE demo! Go the link provided below, and re-size your browser window to see it in action! This how-to shows how the demo was created.

c5.gclocal.net/how-tos/responsive-tables

Let's say you want show a basic table with basic data. You have 4 records to display, with 5 types of data each. This means you will need a table with 5 rows and 5 columns. You wish to add this through a basic Content block.

STEP 1: Add Content

Using the Content block, select the Table dialog. Enter the number of columns and rows. Under the "Class" drop-down, choose "(value)", and enter a unique class. This class will be used to identify your table to make it responsive. Next, add titles to each column, in the first row. You can also fill in the rest of the table with any data. Do not worry about styling at this point! Then, move your cursor to somewhere in the first row and select the "Table Row Properties" dialog. Select the "Header" option for the Row Type.

Your table should now look like this:

Save and add the block to the page.

STEP 2: Add CSS to Header

In the page properties, under Custom Attributes, select "Header Extra Content". Add the following CSS code:

    <style>
   /* General Table Style */
   table.responsivetable {
   width: 100%;
   border-collapse: collapse;
   }
   .responsivetable tr:nth-of-type(odd) {
   background-color: #eee;
   }
   .responsivetable thead tr td {
   background-color: #333;
   color: white;
   font-weight: bold;
   }
   .responsivetable td, .responsivetable th {
   padding: 6px;
   border: 1px solid #ccc;
   text-align: left;
   }
   </style>

Notice the class "responsivetable" in the above code. This is the same class we put into the "Class" drop-down when we first added the table. The idea here is to protect your table so it has this specific styling. Of course, you can always customize the color, border, padding, font styles any way you want.

At this point, you should have a traditional, styled table that is NON-responsive. Below is a screenshot of our non-responsive table on a responsive theme, reduced to a width of a small tablet. Notice that the table does NOT fit well:

STEP 3: Make the Table Responsive

Here's the exciting part! Now, we just need to add some additional CSS! In the Header Extra Content, add the following CSS code:

/* Make Table Responsive --- */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
.responsivetable table, .responsivetable thead, .responsivetable th, .responsivetable tr, .responsivetable td {
display: block;
}
/* Hide table headers (but not display:none, for accessibility) */
.responsivetable thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.responsivetable tr {
border: 1px solid #ccc;
}
.responsivetable td {
/* Behave like a row */
border: none;
padding-left: 50%;
border-bottom: 1px solid #eee;
position: relative;
}
.responsivetable td:before {
/* Now, like a table header */
position: absolute;
/* Top / left values mimic padding */
top: 6px; left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/* -- LABEL THE DATA -- */
.responsivetable td:nth-of-type(1):before { content: "Name"; }
.responsivetable td:nth-of-type(2):before { content: "Email"; }
.responsivetable td:nth-of-type(3):before { content: "Phone"; }
.responsivetable td:nth-of-type(4):before { content: "City"; }
.responsivetable td:nth-of-type(5):before { content: "Sex"; }

}/* End responsive query */

In the above code, notice the "Label the Data" section. Here, the number of these should equal the number of columns you have in your table.

You now have a responsive table!

The images below shows how it should behave. The first is what the table looks like on larger screens, such as an iPad:

Here is what it looks like on smaller devices, such as small tablets and smart phones:

I hope this has been helpful!

If you have any questions, please send me a private message!