input field in table cell

Discussion in 'HTML' started by Jens Lenge, Mar 20, 2005.

  1. Jens Lenge

    Jens Lenge Guest

    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
    Jens Lenge, Mar 20, 2005
    #1
    1. Advertising

  2. "Jens Lenge" <> wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Mar 20, 2005
    #2
    1. Advertising

  3. Jens Lenge

    Jens Lenge Guest

    "Jukka K. Korpela" <> wrote:

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


    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
    Jens Lenge, Mar 20, 2005
    #3
  4. Jens Lenge

    Els Guest

    Jens Lenge wrote:

    > "Jukka K. Korpela" <> wrote:
    >
    >>> 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.

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


    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.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Phil Collins - In The Air Tonight
    Els, Mar 20, 2005
    #4
  5. Jens Lenge

    Jens Lenge Guest

    "Els" <> wrote:

    > 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!
    Jens Lenge, Mar 20, 2005
    #5
  6. Jens Lenge

    DU Guest

    Jens Lenge wrote:

    > 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
    --
    The site said to use Internet Explorer 5 or better... so I switched to
    Mozilla 1.7.6 :)
    DU, Mar 20, 2005
    #6
  7. Jens Lenge

    Jens Lenge Guest

    "DU" <> wrote:

    > 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
    Jens Lenge, Mar 22, 2005
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Richard Dixson
    Replies:
    1
    Views:
    492
    Joe Fallon
    May 18, 2004
  2. Richard Dixson
    Replies:
    2
    Views:
    715
    Richard Dixson
    May 18, 2004
  3. Phillip Roncoroni
    Replies:
    14
    Views:
    1,062
    Toby A Inkster
    Apr 5, 2004
  4. John Dalberg
    Replies:
    4
    Views:
    764
  5. sdf
    Replies:
    3
    Views:
    1,866
Loading...

Share This Page