Question

请帮帮我

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body style="margin: 0px; padding: 0px;">
        <table style="width: 600px;">
            <tr>
                <td rowspan="2" style="background: #FF0;">Left<br/><br/><br/><br/><br/><br/><br/><br/><br/>&nbsp;</td>
                <td colspan="2" height="30px" style="background: #FCC;height: 30px;">header</td>
            </tr>
            <tr>
                <td>Content</td>
                <td style="background: #EEE;">Right</td>
            </tr>
        </table>        
    </body>
</html>

它在Firefox或Chrome中运行良好，但IE忽略高度属性和带文本标题的单元格高度不正确。如何解决？

演示：Fiddle

Answer 1

使用td中的元素设置高度，如下所示：

<div style="display:block;height:30px;">header</div>

Answer 2

试试这段代码：

 <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body style="margin: 0px; padding: 0px;">
    <table style="width: 600px; height:500px">
        <tr>
            <td rowspan="2" style="background: #FF0;">Left</td>
            <td colspan="2" height="80px" style="background: #FCC;">header</td>
        </tr>
        <tr>
            <td>Content</td>
            <td style="background: #EEE;">Right</td>
        </tr>
    </table>        
</body>
</html>

Answer 3

我认为转换为DIV和CSS会很好：

<style>
    #leftPanel {
        background: #FF0;
        float: left;
        width: 135px;
    }
    #headerPanel {
        background: #FCC;
        height: 30px;
    }
    #contentPanel {
        float: left;
    }
    #rightPanel {
        background: #EEE;
        float: right;
        width: 200px;
        height: 150px;
    }
    #containerPanel {
        width: 600px;
    }
</style>

<div id="containerPanel">
    <div id="leftPanel">
    Left<br/><br/><br/><br/><br/><br/><br/><br/><br/>&nbsp;
    </div>
    <div id="headerPanel">
        header
    </div>
    <div id="contentPanel">
        Some content here...
    </div>
    <div id="rightPanel">
        Right
    </div>
</div>

Answer 4

使用html 5不再支持

高度，并且在html 4中不推荐使用由于您使用的是html5，我建议使用

风格= “高度：30像素;”

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body style="margin: 0px; padding: 0px;">
    <table style="width: 600px; height:500px">
        <tr>
            <td rowspan="2" style="background: #FF0;">Left</td>
            <td colspan="2" style="height:30px;background: #FCC;">header</td>
        </tr>
        <tr>
            <td>Content</td>
            <td style="background: #EEE;">Right</td>
        </tr>
    </table>        
</body>
</html>

参考http://www.w3schools.com/tags/att_td_height.asp

在IE中，td和height无法正常工作

4 个答案: