<td> height problem

Discussion in 'HTML' started by Deephay, Jul 13, 2008.

  1. Deephay

    Deephay Guest

    Greetings all,

    I have a problem related to <td> height, I created a table with two
    rows and three cells, the left cell have the attribute rowspan="2",
    here's the HTML:

    <html>
    <body>
    <table width="100%" border="1">
    <tr>
    <td rowspan="2" style="width: 55%">
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    fox<br />
    </td>
    <td valign="top" style="height: 100%">
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    </td>
    </tr>
    <tr>
    <td valign="top">
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    The quick brown fox jumps over the lazy dog<br />
    </td>
    </tr>
    </table>
    </body>
    </html>

    I want the height of the top right cell just equal to the height
    content inside the cell, specify the height of the top right cell in
    the stylesheet to "100%" will do the job in Firefox, but I do not know
    how to achieve this in IE, anyone have any idea?

    For the Firefox behavior, I am quite confused too. According to W3C
    CSS 2.1 spec, the height of a box will be around "height of the
    containing box" * "height percentage you specified in the stylesheet",
    if my understanding is correct, the "containing box" of a <td> is the
    <table> itself, so why specify "height: 100%" for the top right <td>
    shrinks its height in Firefox?

    Thanks very much for the help!

    Cheers,
    Difei
    Deephay, Jul 13, 2008
    #1
    1. Advertising

  2. Deephay

    Deephay Guest

    On Jul 13, 11:12 pm, Ben C <> wrote:
    > On 2008-07-13, Deephay <> wrote:
    >
    >
    >
    > > Greetings all,

    >
    > >   I have a problem related to <td> height, I created a table with two
    > > rows and three cells, the left cell have the attribute rowspan="2",
    > > here's the HTML:

    >
    > ><html>
    > >    <body>
    > >            <table width="100%" border="1">
    > >                    <tr>
    > >                            <td rowspan="2" style="width: 55%">
    > >                                    fox<br />

    > [...]
    > >                                    fox<br />
    > >                            </td>
    > >                            <td valign="top" style="height: 100%">
    > >                                    The quick brown fox jumps over the lazy dog<br />

    > [...]
    > >                                    The quick brown fox jumps over the lazy dog<br />
    > >                            </td>
    > >                    </tr>
    > >                    <tr>
    > >                            <td valign="top">
    > >                                    The quick brown fox jumps over the lazy dog<br />

    > [...]
    > >                                    The quick brown fox jumps over the lazy dog<br />
    > >                            </td>
    > >                    </tr>
    > >            </table>
    > >    </body>
    > ></html>

    >
    > >   I want the height of the top right cell just equal to the height
    > > content inside the cell, specify the height of the top right cell in
    > > the stylesheet to "100%" will do the job in Firefox, but I do not know
    > > how to achieve this in IE, anyone have any idea?

    >
    > >   For the Firefox behavior, I am quite confused too. According to W3C
    > > CSS 2.1 spec, the height of a box will be around "height of the
    > > containing box" * "height percentage you specified in the stylesheet",
    > > if my understanding is correct, the "containing box" of a <td> is the
    > ><table> itself, so why specify "height: 100%" for the top right <td>
    > > shrinks its height in Firefox?

    >
    > You're right that what Firefox is doing there is not in the CSS 2.1
    > specification.
    >
    > The rules are a bit different for table cells, and to a large extent
    > browsers make their own rules.
    >
    > Height: 100% on a table cell usually sort of means make it 100% of the
    > height of the row it's in, but your example is further complicated by
    > the fact that the row is spanned by the cell in the first column.
    >
    > So the browser has to ask itself how much of the first cell it thinks is
    > in the first of the two rows it spans and how much in the second. This
    > is not something I've seen specified anywhere.
    >
    > Setting height: 1px instead, as an indication that you'd like that cell
    > as short as possible, will also work in Firefox and might work in IE if
    > you're lucky. It will never be 1px but at least as high as required by
    > the content.


    Hi,
    Thanks for help. Unfortunately "height: 1px" does not work in IE.
    are there any other way?
    Deephay, Jul 15, 2008
    #2
    1. Advertising

  3. Deephay wrote:

    > Hi,
    > Thanks for help. Unfortunately "height: 1px" does not work in IE.
    > are there any other way?
    >


    Maybe you are using a hammer when you need a screw driver, i.e., a table
    is not what you should be using. How about a URL to a sample page with
    actual content and we can have a better idea what you are attempting
    then can better advise.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 15, 2008
    #3
  4. Deephay

    Deephay Guest

    On Jul 15, 8:41 pm, Ben C <> wrote:
    > On 2008-07-15, Deephay <> wrote:
    >
    >
    >
    > > On Jul 13, 11:12 pm, Ben C <> wrote:
    > >> On 2008-07-13, Deephay <> wrote:

    >
    > >> > Greetings all,

    >
    > >> >   I have a problem related to <td> height, I created a table with two
    > >> > rows and three cells, the left cell have the attribute rowspan="2",
    > >> > here's the HTML:

    > [...]
    > >> >   I want the height of the top right cell just equal to the height
    > >> > content inside the cell, specify the height of the top right cell in
    > >> > the stylesheet to "100%" will do the job in Firefox, but I do not know
    > >> > how to achieve this in IE, anyone have any idea?

    >
    > >> >   For the Firefox behavior, I am quite confused too. According to W3C
    > >> > CSS 2.1 spec, the height of a box will be around "height of the
    > >> > containing box" * "height percentage you specified in the stylesheet",
    > >> > if my understanding is correct, the "containing box" of a <td> is the
    > >> ><table> itself, so why specify "height: 100%" for the top right <td>
    > >> > shrinks its height in Firefox?

    >
    > >> You're right that what Firefox is doing there is not in the CSS 2.1
    > >> specification.

    >
    > >> The rules are a bit different for table cells, and to a large extent
    > >> browsers make their own rules.

    >
    > >> Height: 100% on a table cell usually sort of means make it 100% of the
    > >> height of the row it's in, but your example is further complicated by
    > >> the fact that the row is spanned by the cell in the first column.

    >
    > >> So the browser has to ask itself how much of the first cell it thinks is
    > >> in the first of the two rows it spans and how much in the second. This
    > >> is not something I've seen specified anywhere.

    >
    > >> Setting height: 1px instead, as an indication that you'd like that cell
    > >> as short as possible, will also work in Firefox and might work in IE if
    > >> you're lucky. It will never be 1px but at least as high as required by
    > >> the content.

    >
    > > Hi,
    > >   Thanks for help. Unfortunately "height: 1px" does not work in IE.
    > > are there any other way?

    >
    > There might be, but I don't know much about IE.
    >
    > You might be better off to decouple thing by nesting another table.
    > Outer table with two columns and one row. One cell in the first column.
    > The other column contains another table with two rows.
    >
    > Now there's no rowspan, so maybe the height: 1px will work on IE to
    > keep that cell down to its content height only.
    >
    > Or see if you can manage without tables altogether as Jonathan
    > suggested.


    OK, thanks you all for the advice.
    Deephay, Jul 15, 2008
    #4
  5. Deephay wrote:

    > OK, thanks you all for the advice.


    <shrugs...>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 15, 2008
    #5
    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. Replies:
    0
    Views:
    550
  2. Wotney
    Replies:
    1
    Views:
    530
    Flinky Wisty Pomm
    Oct 25, 2006
  3. tshad
    Replies:
    1
    Views:
    1,689
    bruce barker
    Mar 8, 2007
  4. Bernd Meier
    Replies:
    6
    Views:
    509
    GTalbot
    Jan 14, 2008
  5. samer
    Replies:
    3
    Views:
    427
    Gregory A. Beamer
    Sep 28, 2009
Loading...

Share This Page