input field in table cell

[Jens Lenge]

I have a table cell that contains a single <input> text field (default
looks). Now I want to format the input field width so that it fits exactly
into the table cell. But setting style="width:100%" for the input field will
make it slightly wider than the cell itself (due to its border, I guess).

How can I fit the text field into the table cell so that it fits exactly,
regardless of how wide the table cell is?

Jens

 

[Jukka K. Korpela]

I have a table cell that contains a single <input> text field
(default looks).

Why? It is usually best to analyze why you dag yourself into that hole,
rather than find tools to dig deeper.

Now I want to format the input field width so that
it fits exactly into the table cell.

Why? And where does the cell get its dimensions if not from its
content? As usual, the URL would have saved a few rounds.

But setting style="width:100%"
for the input field will make it slightly wider than the cell
itself (due to its border, I guess).

Not surprising, since by the specifications, the width property sets
the _content_ width.

 

[Jens Lenge]

Why? It is usually best to analyze why you dag yourself into that hole,
rather than find tools to dig deeper.

My forms typically consist of a table with two columns: The first (fixed
width, right-aligned) contains field names such as "Name:", the second
column contains the actual input fields. Now I want to have all input fields
the same size, because it looks better. And I like to control the width of
all input field by setting the width of the respective table column.

As usual, the URL would have saved a few rounds.

Ok, shame on me.
Here is an example: http://www.photoss.de/test/test.htm

I know that I can workaround the problem by setting an exact width for the
input field and not specifying a width for the table. But for large forms
that would require setting the same width for each input field instead of
just one table width - so changes become less elegant. I would prefer to
make the input field fit into the cell instead of make the cell fit to the
input field.

Jens

 

[Els]

My forms typically consist of a table with two columns: The first (fixed
width, right-aligned) contains field names such as "Name:", the second
column contains the actual input fields. Now I want to have all input fields
the same size, because it looks better. And I like to control the width of
all input field by setting the width of the respective table column.


Ok, shame on me.
Here is an example: http://www.photoss.de/test/test.htm

I know that I can workaround the problem by setting an exact width for the
input field and not specifying a width for the table. But for large forms
that would require setting the same width for each input field instead of
just one table width - so changes become less elegant. I would prefer to
make the input field fit into the cell instead of make the cell fit to the
input field.

So, you set it to 100%, but set a width to the table cell and give it
a padding. This way it will not fit 100% (it will have a little space
left and right), but it does grow and shrink with the width of the
column.

 

[Jens Lenge]

So, you set it to 100%, but set a width to the table cell and give it
a padding. This way it will not fit 100% (it will have a little space
left and right), but it does grow and shrink with the width of the
column.

Yes, that's really a good workaround.
Thanks!

 

[DU]

I have a table cell that contains a single <input> text field (default
looks). Now I want to format the input field width so that it fits
exactly into the table cell.

I wonder why your webpage analysis ends up to such design requirement.
It would make more sense (generally speaking) to have the table cell
determine its dimensions according to its content, to render its
content, not the other way around. The container should adjust to fit
its contents. The way you define the problem is that the container has
rigid dimensions and the content should fit in.

But setting style="width:100%" for the

input field will make it slightly wider than the cell itself (due to its
border, I guess).

td input[type="text"] {-moz-box-sizing: border-box; width: 100%;}
would work in Mozilla-based browsers.

How can I fit the text field into the table cell so that it fits
exactly, regardless of how wide the table cell is?

Jens

DU

 

[Jens Lenge]

It would make more sense (generally speaking) to have the table cell
determine its dimensions according to its content, to render its content,
not the other way around.

Generally speaking, I agree. But not here: As it is an input field, its size
would depend on how much text the user fills in. And I do not want to start
with a field width of zero, only because the field is empty at the
beginning.

td input[type="text"] {-moz-box-sizing: border-box; width: 100%;}
would work in Mozilla-based browsers.

Yes, but I'd like to make it work with at least IE6 also.

Cheers, Jens