Eingabe in TD wird gerendert nach Rand rechts in IE7

Question

Bekam ein Problem mit einem Stil in IE7. Mit diesem css Stil

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

.forty-wid 
{ 
    width:40px; 
} 

input 
{ 
    width:100%; 
} 

zeigt zwei Grenzen für meine td. Nach näherer Prüfung scheint es, dass

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

nach dem rechten Rand gerendert wird. Wer kennt einen Workaround dafür?

BEARBEITEN: Nach dem Ausprobieren mit JSBin stellt sich heraus, dass die vorherige td mit der nächsten td überlappt. Es ging wie diese

Border-links-1 TD1 Border-links-2 Border-rechts-1 TD2 Border-links-3

und es scheint, durch meine input width:100%

Probe verursacht wird bei http://jsbin.com/egaru4/3

Answer 1

Trotz mit diesem um eine gute Viertelstunde durcheinander ..

Die einzige Art, wie ich sie aus der Ferne nah am IE7/IE8/Firefox 3/Chrome dev/Opera zu verwenden war zu korrigieren aussehen könnte dies fugly (vor allem wegen des Fremd <div> ‚s landete ich mit ..) 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> 

Ich bin nicht besonders zufrieden mit diesem, vielleicht kann jemand anderes helfen? Wenn nicht, könnte ich zu einem späteren Zeitpunkt noch etwas Zeit damit verbringen.