Responsive Tables via Squishing or Collapsing rows and columns

Support
#1

Hello All,
We are really having a hard time with the following tables and some of our text being responsive:

  1. https://www.spencercole.com/about-spencer-cole/
    look at the the bottom table figure.
  2. https://www.spencercole.com/case-studies/ = the main navigation page table has a scroll bar at the bottom… I would really like for it to be page width of the table shows up on the page, but it doesn’t need a scroll bar on the bottom or top?
    3)All case studiesSub Nav Pages…if I just fix one of those pages, I can use that responsive design on the rest of the subnav pages
  3. The sectors landing page - the table is not responsive and the text is weird.
    Any support you guys can provide as it relates to squishing tables and collapsing rows or columns would be greatly appreciated.

I’ve tried a lot of things to get these designs… The design concepts are wonderful… My challenge is implementation…Wine, anyone?

Need more wine,
CB

#2

Hello CB,

Thanks for writing in!

Please understand that HTML table element is not responsive. This is why most sites do not use tables. Any modifications to the Table element will require custom CSS and this is beyond the scope of our support.

We highly recommend that you use rows and columns in designing your page. The row element has a column layout option that allows you to choose when to collapse the column and how many columns to display in a specific screen size. Please check out the row element here in this documentation:

You may also be interested in our tutorial videos here in creating your column layouts:

Hope this helps.

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.