Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2011
    Thanked 0 Times in 0 Posts

    Need help with table and cell width.

    Hi all,

    I am trying to make a webpage that will fit an iphone screen: 320x480px.

    My page consists of a table with 2 rows, 3 columns. Each cell has an image in it, and the images are sized at 200x200px. They are larger than needed in the off chance that the website is visited on the iPad.

    My goal was to create the table in such a way that it get the width of the device the webpage is being loaded on using the following HTML Meta tag:

    <meta name="viewport" content="width=device-width, user-scalable=no" />
    Unfortunately that doesn't really fix the issue as the table is still too large for the screen and one has to scroll to the right and to the bottom.

    My next idea was to confine the table to a fixed size of 320px wide and forget about iPad users. Hence I incorporated the below CSS and HTML:

    CSS code:
    body {
        font-family: Helvetica, Arial;
        -webkit-user-select: none;
        margin: 0 auto;
        width: 320px;
    HTML code:
    <table border="0" cellspacing="0" cellpadding="0" bgcolor="#3399ff">
    		<td><img id="blue0" onclick="blueClick(0)" /></td>
    		<td><img id="blue1" onclick="blueClick(1)" /></td>
    		<td><img id="blue2" onclick="blueClick(2)" /></td>
    		<td><img id="blue3" onclick="blueClick(3)" /></td>
    		<td><img id="blue4" onclick="blueClick(4)" /></td>
    		<td><img id="blue5" onclick="blueClick(5)" /></td>
    Unfortunately this doesn't work as when I test with my browser the width is not 320px.

    Therfore, is there a way to set each cell of the table as being 33% of the device width?

    Any help will be appreciated. Thank you.

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Thanked 20 Times in 20 Posts
    Try to add the width="320" attribute in <table> tag, then width="33%" in each <td>, or width="33%" in the <img> tag.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts