HTML Table slightly wide of iPhone screen in portrait mode
I have a php served web page with a table which looks fine on the desktop. It also looks fine on the iPhone in landscape mode, but in portrait orientation on the iPhone the table is slightly off on the right side. I suspect it is because the table is using 100% width (although I tried 98%) and some left side padding is pushing it off to the right slightly. Also I read from another post about putting my inside of a but all that seemed to do was vertically misalign the Log Out link on the right from the text on the left side and not fix the table from rolling off the right side. By the way I can scroll the table on t开发者_如何学Che iPhone to see it but I'd rather have it fit in the screen. Here's the HTML:
<html><head><title>Feed</title>
<meta name=viewport content='width=device-width, initial-scale=1.0'>
<link rel=icon type=image/x-icon href=/images/Icon.jpg></head>
<body><p1 style=text-align:left;><b>Feed for Paul</b><span style=float:right;><b>
<a href=webLogOut.php>Log Out</a></b></span></p1>
<p>Post <a href=webFindShow.php>TV Show or Movie</a>
<p><table border=1 style='width:98%'>
<tr><td colspan=3 line-height:4em><span style=text-align:left;vertical-align:middle;>Wednesday | 5 <img src=/images/goldStarOutlined.png alt=star width=20 height=20> | <a href=vote.php?user=1&feed_id=295&vote_type=1>1 <img src=/images/ThumbsUpGreen.png></a> <a href=vote.php?user=1&feed_id=295&vote_type=2>0 <img src=/images/ThumbsDownRed.png></a></span>
<span style=float:right;vertical-align:middle;>Paul</span></td></tr><tr><td style=width:185px;><img src=http://image.tmdb.org/t/p/w185/jeGtaMwGxPmQN5xM4ClnwPQcNQz.jpg></td><td>Very well done show. </td></tr>
</body></table></html>
精彩评论