Question

I’m having some problems with tables in IE.
Funny enough, it’s only some tables where it choose to do this, but none the less, I can’t figure out why.
Really, it’s not that it is ruining the layout or something, but still, I would like to know why it actually do this.
I’ve attached a picture so you can see what I mean:

The top is Chrome/Firefox, and the bottom is IE.
I know tables and such are a bit different in different browsers, but usually the difference is a couple of pixels or so.
I’ve used every reset CSS method I can find, so everything should be the same in every browser.

The table is formed like this:

<table class="AdminAccess">
            <tr>
                <td>********</td>
                <td><img alt="" height="16" src="../images/edit.png" width="16"></td>
                <td><a href="admins_edit.html">Edit</a></td>
                <td><img alt="" height="16" src="../images/mail.png" width="16"></td>
                <td><a href="#">Send new password</a></td>
                <td><img alt="" height="16" src="../images/delete.png" width="16"></td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>********</td>
                <td><img alt="" height="16" src="../images/edit.png" width="16"></td>
                <td><a href="admins_edit.html">Edit</a></td>
                <td><img alt="" height="16" src="../images/mail.png" width="16"></td>
                <td><a href="#">Send new password</a></td>
                <td><img alt="" height="16" src="../images/delete.png" width="16"></td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>********</td>
                <td><img alt="" height="16" src="../images/edit.png" width="16"></td>
                <td><a href="admins_edit.html">Edit</a></td>
                <td><img alt="" height="16" src="../images/mail.png" width="16"></td>
                <td><a href="#">Send new password</a></td>
                <td><img alt="" height="16" src="../images/delete.png" width="16"></td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>********</td>
                <td><img alt="" height="16" src="../images/edit.png" width="16"></td>
                <td><a href="admins_edit.html">Edit</a></td>
                <td><img alt="" height="16" src="../images/mail.png" width="16"></td>
                <td><a href="#">Send new password</a></td>
                <td><img alt="" height="16" src="../images/delete.png" width="16"></td>
                <td><a href="#">Delete</a></td>
            </tr>
        </table>

The table itself got 70% in width, and the class, AdminAccess, got this CSS:

table.AdminAccess tr td:nth-child(1) {width:48%;}
table.AdminAccess tr td:nth-child(2) {width:3%; padding:4px 0px 0px 0px;}
table.AdminAccess tr td:nth-child(3) {width:11%;}
table.AdminAccess tr td:nth-child(4) {width:3%; padding:4px 0px 0px 0px;}
table.AdminAccess tr td:nth-child(5) {width:30%;}
table.AdminAccess tr td:nth-child(6) {width:3%; padding:4px 0px 0px 0px;}
table.AdminAccess tr td:nth-child(7) {width:2%; text-align:right}
table.AdminAccess tr td {
    vertical-align:middle;
    padding:5px;
}

And then some background CSS which should be unimportant here.

So basically, I have no idea why it behaves like this in IE, and not other browsers. As I said. It’s only some of my tables. Some, exactly styled like this, but with different content, do not do it.
So, I’m lost.
Again, not that it matters for the layout itself, but it would be nice to know what’s wrong.

Answer 1

For table.AdminAccess tr td:nth-child(7), you’ve specified width: 2%.

2% of the width of your table is not enough to contain “Delete”.

Due to this, browsers must adjust the width of your other columns to compensate. It just so happens that Chrome/Firefox do this adjustment differently to IE9.

Here’s the test case I made: http://jsfiddle.net/thirtydot/hC53w/show/

The columns don’t align between Chrome/IE9:

Once I change “Delete” to “!”, they align: http://jsfiddle.net/thirtydot/hC53w/1/show/