<td> height problem

D

Deephay

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
 
D

Deephay

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?
 
J

Jonathan N. Little

Deephay said:
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.
 
D

Deephay

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,480
Members
44,900
Latest member
Nell636132

Latest Threads

Top