How to get table to shrink on iPhone/ mobile device.

[pittles78]

Hello,

My page in question is http://superluxescreenprinting.com/next-level-3600-premium-crew/

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?

[tomasz86]

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.

[Designer42]

@pittles78

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.

[Author]

Posts