Home/ Questions/Q 108821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T01:58:21+00:00

I have a table where one of the left column shrinks when I set

  • 0

I have a table where one of the left column shrinks when I set the nested element’s style to width:80%. The column shrinks and truncates the input elements right edge. You can see what I’m talking about by removing the style from the input element.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'      'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html> <head> </head> <body>     <table width='100%' border='1'>         <tr>             <td>                 <input type='text' style='width: 80%;' />             </td>             <td>                 Lots of text to make the right cell expand.                 Lots of text to make the right cell expand.                 Lots of text to make the right cell expand.                 Lots of text to make the right cell expand.                 Lots of text to make the right cell expand.                 Lots of text to make the right cell expand.                 Lots of text to make the right cell expand.                 Lots of text to make the right cell expand.                 Lots of text to make the right cell expand.             </td>         </tr>     </table> </body> </html>

I’ve got a feeling it’s because the columns are sized based on children, but by sizing the element based on it’s parent, I’ve created a ‘catch 22’.

Can somebody please enlighten me as to what is going on, and how I might maintain the same column width, and size my element to 80% of it’s width?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. The problem that you are having is because you are setting the <input>‘s width to be a percentage of a cell that has no width. So the cell is becoming smaller to make up for the text on the other cell and once that’s done the input is getting 80% of whatever is left.

    Your options:
    1) Set a width in pixels for the <input> field.
    2) Set a width in pixels/percentage for the <td>.

    addressing your comment: When you remove the style, the reason it is getting larger is because it is going back to the browser’s default size for <input> elements, which is bigger than 80% of whatever’s left in the cell.

    • 0