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