Posted by Ben C on 10/17/06 20:32

On 2006-10-17, John Dalberg <nospam@nospam.sss> wrote:
> I have this simple table below. I can't get the input box (text field) to
> display smaller. I tried different cell widths, I used smaller font and I
> set both the cell width and the text field but I can't decrease the width.
> Should't I be able to set the second cell width to any width?

You can, but it's treated as a minimum width. If the content of the cell
isn't that small, the cell gets wider. That's just what <td>s do-- they
never overflow.

The input is a replaced element and has an intrinsic width of whatever
it is you're seeing, which is bigger than 5% of 400px, so the cell
grows. Intrinsic width trumps containing width.

> Right now in Firefox, the input box is over 100px and it should be
> much less. When I remove the tetx field, the cell width is fine. What
> are the constraints of a text field?

You need to set the width of the input, using the width property or the
size attribute.

Setting it to width: 100% does the trick. This explicitly sets it to
"the width of its container", which is the <td>, whose width is 5% of
400px, i.e. 20px.

[Back to original message]