如何減少表格html中文本框的大小？

Question

如何減少文本框的寬度？紐約應該在第二列 可以看到我想要這個表是在一個很好的修復

 <table style="background-color:#778899; width: 100%;" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td><th><font color="white">Distance(i,j)</font></td> 
     <td><th><font color="white">newyork</font></th></td> 
     <td><th><font color="white">chicago</font></td> 
     <td><th><font color="white">topeka</font></td> 
    </tr> 
    <tr> 
     <td><th><font color="white">seattle</font></th></td> 
     <td style="background-color:#CD5C5C; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
     <td style="background-color:#87CEEB; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
     <td style="background-color:#000080; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
</tr> 
<tr> 
    <td><th><font color="white">san-diego</font></th></td> 
    <td style="background-color:#CD5C5C; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
    <td style="background-color:#87CEEB; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
    <td style="background-color:#000080; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
</tr> 
</table> 

Answer 1

您不必使用<td>和<th>在同一時間。我並沒有減少的寬度（如果你希望它可以減少你可以減少每個輸入100％的寬度或使用大小屬性）

入住此的jsfiddle：http://jsfiddle.net/e3pHj/

下面是代碼：

<table style="background-color:#778899; width: 100%;" cellpadding="0" cellspacing="0"> 
    <tr> 
     <th><font color="white">Distance(i,j)</font></th> 
     <th><font color="white">newyork</font></th> 
     <th><font color="white">chicago</font> 
     <th><font color="white">topeka</font></th> 
     </tr> 
    <tr> 
     <th><font color="white">seattle</font></th> 
     <td style="background-color:#CD5C5C; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
     <td style="background-color:#87CEEB; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
     <td style="background-color:#000080; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
</tr> 
<tr> 
    <th><font color="white">san-diego</font></th> 
    <td style="background-color:#CD5C5C; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
    <td style="background-color:#87CEEB; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
    <td style="background-color:#000080; padding: 3px;"><div style="margin-right: 3px;"><div style="padding-right: 3px;"><input type="text" style="width:100%;"></div></div></td> 
</tr> 
</table>​