如何降低文本框的大小表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>​