I have a table that is wider than the columns on mobile devices.
This is a limitation of using tables. They’re just not meant for mobile/responsive design since they’re always going to follow the size of the largest content.
I’d rather it just present it so that the mobile user can scroll to the side to see the additional information.
You can do this by wrapping your table on a div and then setting a specified width for your table in pixels.
<div style="overflow-x: scroll;"> <table style="width: 540px;"> ... </table> </div>
So, how do I set the opacity on a table to be completely solid so that I don’t have the margin lines running through the data/text?
If you want to go this route then you can just add a background-color.
<table style="background-color: #fff;"> ... </table>