Input inside TD gets rendered after border-right in IE7

Got a problem with a style in IE7. Using this css style

table td
{
    padding: 5px;
    background-color: #EEE;
    border: solid 1px #777;
}

.forty-wid
{
    width:40px;
}

input
{
    width:100%;
}

displays two borders for my td. After close inspection it seems that

<td class="forty-wid">
<input type="text" value="0" />
</td>

gets rendered after the right border. Anyone know a workaround for this?

EDIT: After trying it out with JSBin, it turns out that the previous td was overlapping with the next td. It went on like this

Border-left-1 TD1 Bo开发者_如何学Crder-left-2 Border-right-1 TD2 Border-left-3

and it seems to be caused by my input width:100%

Sample at http://jsbin.com/egaru4/3

---

Despite messing around for a good quarter of an hour with this..

The only way I could make it look remotely close to correct on IE7/IE8/Firefox 3/Chrome dev/Opera was to use this fugly (mainly because of the extraneous <div>'s I ended up using..) HTML/CSS:

Live Demo

table {
    border-collapse: collapse;
    table-layout: fixed
}
.forty {
    width: 40px
}
input {
    width: 100%
}

table td {
    background-color: #eee;
    border: solid 1px #777
}
table th {
    color: #222;
    padding: 6px 5px;
    text-align: left;
    background-color: #7f99b0;
    border: solid 1px #888
}
table div {
    margin: 6px 5px 6px 0; padding: 0 5px 0 5px
}

---

<div class="container">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th class="forty">
                H
                </th>
                <th>
                H2
                </th>
                <th>
                H3
                </th>
                <th>
                H4
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div><input type="text" value="0" /></div>
                </td>
                <td>
                    <div>Text here</div>
                </td>
                <td>
                    <div><input type="text" /></div>
                </td>
                <td>
                    <div><input type="text" /></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

I'm not particularly pleased with this, maybe someone else can help? If not, I might spend some more time with it at a later date.