Aligning a table to the very left of a div

I'm trying to make a 2x2 grid, which fills up the entire window in an iPhone, with a table. Currently it looks like this:http://dl.dropbox.com/u/182509/photo.PNG

Note the squshed-uppy-ness of the right column, and the gap at the left.

I cant fix either.

Relevan开发者_StackOverflow社区t css:

body { margin: 0; position: absolute; height: 100%; }

.full { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; }

table { border-width: 0px; border-spacing: 0px; border-style: hidden; border-color: gray; border-collapse: collapse; background-color: white; width: 100%; height: 100%; left: 0; top: 0px; margin: 0; padding: 0px; position: absolute; }

td { border-width: 1px; padding: 1px; border-style: solid; border-color: gray; background-color: white; width: 50%; height: 160px; }

and html:

<div id="helpView" class="full">
    <table id="help">
        <tr>
            <td>Hey..</td>
            <td>Hi.</td>
        </tr>
        <tr>
            <td>Hello.</td>
            <td>Greetings!</td>
        </tr>
    </table>
</div>

Any help appreciated

---

Since your td has border set to 1px, it adds to the total width of what we are seeing, so you have to reduce the width of your td. See box model for reference:

http://www.w3.org/TR/CSS2/box.html

or you can set the left of your table to -1 to adjust it to left:

table{left:-1}

it will work since the position is absolute.

---

You've overcomplicated things.

http://jsfiddle.net/Z3rs5/

You should write simple code, also, do't cram all of the CSS statements in one row, every time you do that, God kills a kitten!