Solved

Table overflows viewport

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Easy way to make text fit better in a mobile version of a website 6 62
CSS SASS 4 44
How to make button inactive until I fill in all the boxes. 11 26
Why "Mobile First"? 5 35
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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…

679 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