Support Forum

Wide table is broken on mobile device

ED Edward
Edward
Member

Hi,

I need to post a table with 6 or more columns; and due to the width of the table, it’s not showing properly on mobile device. How can I have horizontal scrolling on the table whenever browser is narrower than the table?

Thank you very much for your help.

3 Answers

New Answer

YS Yellow Swordfish
Yellow Swordfish
Member

Well the usual way would be to add an overflow:scroll; CSS rule to the element – so that would be my first try at this. The worry is that it might have unwanted knock-on effects on other posts but I would still do it first to see. There may be other ways around it. So try this…

Forum admin > Themes > Custom CSS.

Add the following rule:

#spMainContainer .spTopicPostSection .spPostSection .spPostContentSection .spPostContent {
         overflow: scroll;
}

save it – clear your browser cache and see if that helps,

ED Edward
Edward
Member

It works! Thank you very much.

So far so good. I hope there won’t be any unwanted effect.

YS Yellow Swordfish
Yellow Swordfish
Member

It really depends on whether you need to do this often or if this is basically a one-off. If a one-off then it would be better to be explicit in the CSS to ensure it only effects that one post. If often or regular then you may need to leave it as it is and accept there may just be the odd post that overflows.

While I am afraid to day I do not recall any names, I have seen table plugins that work ‘responsively’ when displayed on a mobile but this will often mean stacking table cells on top of each other. Might be worth investigating however.