Как уменьшить размер текстового поля в таблице 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>​