Solved

Table overflows viewport

Posted on 2014-03-31
5
183 Views
Last Modified: 2014-03-31
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
Comment
Question by:ddantes
5 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 150 total points
ID: 39966153
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39966154
Or a drop down to choose the length of stay and only show the 2 columns at a time
0
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39966155
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 100 total points
ID: 39966559
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
 

Author Comment

by:ddantes
ID: 39967028
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Text in block not displaying properly 2 33
Printing a Google Form 2 25
Can't get the PDF Icon to appear on the webpage 1 21
alert before form submission 6 32
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now