Solved

Table overflows viewport

Posted on 2014-03-31
5
188 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

838 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