Home/ Questions/Q 7514077
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T00:23:15+00:00

How to reduce width of text boxes? newyork should be seen in second column

  • 0

How to reduce width of text boxes? newyork should be seen in second column
I want this table to be in a good fix:

     <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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t have to use <td> and <th> at the same time. I didn’t reduce the width (you can reduce the 100% width in each input if you want it to be reduced or use the size attribute)

    Check this jsfiddle: http://jsfiddle.net/e3pHj/

    Here is the code:

        <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>​
    • 0