Content bleeds over margin lines in wide table

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #5681 Reply
    Michael Sanders
    Guest

    This might be a non-theme related question, but I thought I’d start here.

    I have a table that is wider than the columns on mobile devices. It isn’t a big deal, but the table opacity allows the margins of the column to be seen and I’d rather it just present it so that the mobile user can scroll to the side to see the additional information. Adjusting the font size is an option, but if the user has to then zoom in and zoom out, perhaps I’d just let it go beyond the width and let it go at that.

    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?

    #5682
    Ron
    Keymaster

    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.

    Example:

    <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.

    Example:

    <table style="background-color: #fff;">
       ...
    </table>
Viewing 2 posts - 1 through 2 (of 2 total)
Reply To: Content bleeds over margin lines in wide table
Your information: