The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to get table to shrink on iPhone/ mobile device.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #151606


    My page in question is

    On a laptop or desktop computer our pricing table toward the bottom of the page looks fine. On an iPhone or mobile device it blows my page up. How can I make it shrink to not blow up my page? I realize as it shrinks you won’t be able to read it that well, but I just don’t want the page blown up.

    Best, Jon


    Why don’t you do a quick, simple search?


    As @traq pointed out above, you should use search for this one. There are really good guides here on CSS-Tricks when it comes to responsive tables.

    That said, the most basic method to force table not to resize automatically is to set table-layout: fixed in CSS.



    You padding on your table cells are blowing out the layout of the cells. Use percentages instead if you want the padding. Otherwise lose the padding all together or just have padding for the top and bottom and shrink the padding to 2px for left and right for mobile.
    It is not pretty but it will get the job done. If anything you have a ton of margin on the left of the layout for your content. Shrink the margin and that will afford you more space for a table.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.