Different handling table td-height in IE vs. all others?_问答_开发者

Different handling table td-height in IE vs. all others?

开发者 https://www.devze.com 2023-04-11 17:27 出处：网络

I have a problem with TABLES in all internet explorer versions, or rather with the height of TDs that drive me nuts.

I have the following markup

<table>
    <tbody>
        <tr style="vertical-align:top;">
            <td id="TD1" width="35" colspan="2" style="background-color:yellow; height:1%;">
                <div id="DIV1" style="height:10px; background-color:red;"></div>
            </td>
            <td id="TD2" width="15" rowspan="2" style="height:99%;">
                <div id="DIV2" style="height:160px; background-color:green;"></div>
            </td>
        </tr>
        <tr style="vertical-align:top;">
            <td id="TD3" width="25">
                <div id="DIV3" style="height:60px; background-color:blue;"></div>
            </td>
           开发者_JAVA百科 <td id="TD4" width="10">
                <div id="DIV4" style="height:80px; background-color:orange;"></div>
            </td>
        </tr>
    </tbody>
</table>

For a better understanding you can execute the code in the tryit-editor from w3schools.com

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_height.

I think that explains, what I try to explain :)

While the height of DIV2 is smaller or equal than the height of DIV1 and DIV3 or DIV4 it works like expected. But when the height of DIV2 is bigger than the height of DIV1 and DIV3 or DIV4, the IE rises TD1 in the same ratio like TD3 and TD4.

In all other browsers, only TD3 and TD4 raises. TD1 has still the same height like DIV1.

Has someone an idea or a workaround how I can fix this?

A tableless layout is sadly no option.

Without a proper doctype, you will never get IE to attempt to perform like the other far more modern browsers. IE is in quirks mode. Use this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or this one:

<!DOCTYPE html>