Follow

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:
    1.png
     
  2. Add the content to your table cells:
    2.png

    Here is what this table would look like if I were to stop here and save the page:
    s1.png
    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:
    2a.png
     
  4. Inside the source code window, locate the opening <table> tag and place your cursor at the end of the word, but inside the closing bracket:
    3.png
     
  5. Add a space, and insert the following text: class="table" before the closing bracket, so that the entire line now reads <table class="table">
    4.png

    Here is what this table would look like if I were to stop here and save the page:
    s2.png
    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 <div class="table-responsive">
    5.png
     
  7. Now close this new div, by adding the closing div tag DIRECTLY below the closing table tag (</table>), that reads </div>, and then click the OK button at the bottom right of the window:
    6.png
     
  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:
    7.png
     
  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:
    s2.png
    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:
    s3.png
     

     

Congratulations! You have successfully made a responsive table. 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk