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; }
}