Thread: How to fix Table issue in Mobile view of a web page?

I have been facing a problem that table is over flowing in mobile devices, it looks fine in desktop view.
There are some jQuery or java script codes available over internet but i don't want to use them. I am looking to fix it with CSS only. In CSS tricks also they mentioned some logical solutions but that is working to some extent and getting some bugs, at the end that doesn't serves our purpose.

Found some CSS style online, it works to some extent but this code is also having style issue, content is showing in zig zag manner, if you have any solutions for this that you have already dealt with, please share:


Keep it as a <table> for accessibility definitely. In your media query for smaller sizes, you could do something like:

@media all and (max-width: 768px) {
tr { display: block; border: 1px solid grey; padding: 1em; text-align: center; }
td { display: inline; padding: 0 .5em; }
}

That wouldn’t force a line break though. The easiest way to get around that would be to add a <br> element to your second cell and hide it in your desktop CSS:

td>br { display: none; }
@media all and (max-width: 768px) {
td>br { display: block; }
}

We can also use Zebra stripping where each table row becomes a table in itself but only as wide as the screen. For each cell we have write our own css so that we can solve this issue.

I found and easy solutions in w3schools and i tried it works excellent. As per their guidelines please read the instructions:
To create a responsive table, add a container element with overflow-x:auto around the <table>:
<div style="overflow-x:auto;">
<table>
...
</table>
</div>

This works fine in order to overcome tables issue in responsive web design or mobile view.