Scrolling Tables

Are your tables presenting wider than the screen?

Kelly from Tactuum shared the following with us.

First and foremost, I always go into the Table Properties and delete any set width and height (don't set at 100%). Both areas should be blank. Then I set the top row as a Header Row and all the top row cells as Header Cells - if it is a proper table in that way...if it is just a table to line up information better, no need to do that.

The best way to make your table as dynamic as possible and fit within the confines of the page width you are viewing content on the front end is to use an HTML cleaner, copy the table code from the Source Code in the backend and paste it into the HTML cleaner tool. https://html-cleaner.com/

The idea is to clear out all the width and height settings in the cells and columns so that the table moves with content in the cells. If the table is 12 columns in width, it is going to scroll side to side no matter what you do. But there is no reason to expect a 4 column table to not fit on a page without scrolling left to right (amount of content in the cells notwithstanding).

Playing with the lines of a table on the CMS by dragging them left and right makes a bigger mess and causes tons of reworking as moving one line causes another to shift size without meaning to. It is better to clear out the widths. That being said, if it is a one cell table (I noticed several of these - obviously used to emphasize information), you can drag the line one way or the other. I noticed one box where it was scrolling left to right. If you put content in a box, it will act like a table and scroll left/right when it exceeds the page width where plain content will text wrap when it exceeds the page width. In this case you can drag the right side of the box toward the left to achieve a width within the page width to eliminate the need to scroll left/right on the front end.

I know this a lot of information, I am happy to answer questions or help with some tables until you get the hang of what I am talking about. After a couple of times working on some larger tables using the HTML cleaner, I got the hang of it and it has drastically changed the way the tables respond and look on the front end, in a good way!