如何减少的文本框的宽度?纽约应被视为在第二列我想这个表是在一个很好的解决办法:
<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>
您不必在同一时间使用<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>