IE and FF render my table “unexpectedly”

2019-09-13 21:49发布

问题:

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>

Try setting the line-height property instead/as well as the height property, the extra padding/margins you're seeing is as a result of line-height calculations, by defining it you'll be able to fix it and keep it constant between browsers.