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％宽度或使用size属性）

检查此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>

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

1 个答案: