[Solved] How to Enable Website Table Horizontal Scrolling on Mobile using CSS?

Mobile use has surpassed the use of the big-screen desktops. And this is going to rise in the coming years. People prefer reading articles or any web content on their smartphone rather than getting on to the desktop.

They find it more comfortable searching online contents on their mobile. Using their smartphone, they can search online anywhere and anytime. Recent Google survey released clearly indicates that people make more searches on mobile than desktop.

If you are having any website and ignoring your readers experience surfing your website on their mobile, you are loosing more than 50% of your readers (maybe more than that). Don’t make it happen. You should check if your website is getting render properly on mobile or on any other portable gadgets.

On our CSEstack website, the table in the article was not scrollable horizontally. We did not realize this issue until one of our readers reported this bug. It seems to be small code change but user perspective it is bad UI design.

So here is a simple solution that solved our problem.

Enable Website Table Horizontal Scrolling on Mobile

You need to add overflow parameter in CSS. Add the following CSS code to your website style sheet file.

table {
  overflow: auto;
  display: block;
}

This will enable scrolling automatically whenever it requires.

You can also force to enable scrolling by passing assigning scroll value to the overflow parameter.

table {
  overflow: scroll;
  display: block;
}

You can use this overflow parameter with any other block on your website to enable scrolling. Do check your website blocks on mobile and test if all the code blocks on your webpage are rendering properly.

Hope this solves your problem. If you still face any issue, write in the comment section.

Aniruddha Chaudhari

I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on <b>CSEstack.org</b> portal.