• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 212
  • Last Modified:

Table overflows viewport

A table overflows the iPhone viewport, no matter how narrow a width I specify.  Please advise:

<table cellpadding="2px" "width: 95%">
 <tr>
 <th>Length of Stay: </th>
<th>3-4 Nights </th>
<th>5-6 Nights </th>
<th>7-13 Nights </th>
<th>14+ Nights</th>
</tr>
</table>
0
ddantes
Asked:
ddantes
2 Solutions
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The iphone screen resolution for 3 is 340px, iphone 4 and 5 is 640 px.

You probably need to make the font real small or rethink how you are going to display the data.  Are you using bootstrap or foundation for a responsive grid?

On the phone, you may have to go to just a couple of columns.  

On page one you might have
 <th>Length of Stay: </th>
<th>3-4 Nights </th>

then on page 2
 <th>Length of Stay: </th>
<th>5-6 Nights </th>

page 3
 <th>Length of Stay: </th>
<th>7-13 Nights </th>

page 4
 <th>Length of Stay: </th>
<th>14+ Nights</th>

In other words, show the just the 2 columns, then a link to slide left or right to view more options.  

If you simply  make the font smaller, it will be hard to read.  If anything  you may want the font a bit larger.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Or a drop down to choose the length of stay and only show the 2 columns at a time
0
 
Tej Pratap Shukla ~DexterServer AdministratorCommented:
Hey there

Why don't you try mentioning width in pixels , instead of percentages. And it's but obvious if width is 95% then anything more or less would overflow
Feel free to revert back for further queries

Thanks
~Dex
0
 
COBOLdinosaurCommented:
I would not use pixels or percentages.  It should resolve using vw as the unit of measure for both dimensioning and font size.  

Tables are always probleatic in small screens because browser tend to ignore general CSS sizing rules to fit content to cells unless there are explicit rules to limit size and resolve overflow.

Cd&
0
 
ddantesAuthor Commented:
Thank you all for comments.  CSS applied to the tables did not appear to affect the layout, or the overflow of the viewport.  I tried applying table width in terms of vw, but it (also) did not appear to have any effect.  Eventually I was able to abbreviate the text in table cells, and adjust font-size such that it is legible, and no longer overflows the viewport.  It was a pain, but I'm satisfied with the outcome.  www.mauitradewinds.com/RezTest/mobile/rates.html  This page is served only to iPhone and smart phone visitors.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now