Site Editor: Creating A Responsive Table

In the Site Editor, the table tool is useful for quickly displaying content in a grid, but what happens to that table on a mobile device? Instead of losing the formatting, here is a simple way to make a table scrollable horizontally in mobile view so that all your information is visible by adding two classes to the code.

Use the corresponding example tables on this page to view the outcome of this tutorial: http://www.smokingbarrelwines.com/responsive-tables

PLEASE NOTE: You may click on images in this tutorial to make them larger.

1. Open your page, and place your cursor where you'd like to add the table. (For ease of visualizing the table, I will be adding a very simple table with no styling, and nothing else on the page.) Click on the Table menu item. Hover over Insert Table, and drag your cursor to create the number of columns/rows you'd like for your table. For this tutorial, I will create five columns and three rows:
   
   
2. Add the content to your table cells:
   
   

   Here is what this table would look like if I were to stop here and save the page: Not very appealing, is it? You could use the table tools to fine tune the styling, but after the next step, it may not be necessary. Back to our page in the site editor!

   
   
3. Click the Source Code (< > icon) menu item to open the source code popup window:
   
   
4. Inside the source code window, locate the opening
   
   
5. Add a space, and insert the following text: class="table" before the closing bracket, so that the entire line now reads




Here is what this table would look like if I were to stop here and save the page: It's looking much better, isn't it? The "table" class gives our table some light padding, which looks great by default. But we're not done yet, so back to our page in the site editor!



6. Now we will wrap the entire table code in one simple div, which will make our table responsive in mobile view. Add a line of code DIRECTLY above the opening table tag (to which we just added the class) that reads
   
   
   
7. Now close this new div, by adding the closing div tag DIRECTLY below the closing table tag (
), that reads , and then click the OK button at the bottom right of the window:


8. In the Site Editor window, your table will look the same as it always has, but things have changed, I promise! Click the Save button at the bottom right of the editor window:
   
   
9. On your site in desktop view, it will look the same as it would if we had stopped after adding the first "table" class: a nicely padded table:
   
   HOWEVER, when you look at the same table in mobile view, you'll see that the div we added with the "table-responsive" class has made it so the table is scrollable: