I've been struggling with Table-Layout and now I tried to implement the lessons in my application - and that supposedly "simple rendering exercise" still ruins my day :((
The 
screenshot below illustrates the problem a bit: 2 rows have a fixed height of 20px, but as the 5th col is too heigh, IE splits the neccassary "filling" equally across all rows, whereas FF respects the assign row-height and only extends the last row w/o a height-spec. (In my real case, also FF renders incorrectly and enlarges rows w fixed height).
So I wonder if there is perhaps a safe (cross-browser) solution to fix this???
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<table border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr style="height:20px;"><td style="height:20px;">1a</td><td>1/2</td><td>1/3</td><td>1/4</td>
<td rowspan="4" style="height: 300px;">the <span style="background-color: yellow">supacell</span> just contains a lot of text and other info, variable height etc.</td></tr>
<tr><td height="20">bla2</td><td><input type="text" /></td><td>2/3</td><td>2/4</td></tr>
<tr><td height="20">bla3</td><td>3/2</td><td>3/3</td><td><textarea cols="20" rows="4">bla</textarea></td></tr>
<tr><td colspan="4">no height</td></tr>
</tbody>
</table>
</body>
</html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
