Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Table overflows viewport

Posted on 2014-03-31
5
Medium Priority
?
199 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 600 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 53

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 12

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 400 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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

670 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