3

助けてください

<!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 とテキスト ヘッダーのあるセルの高さが正しくありません。修正方法は？

デモ:フィドル

4

4 に答える 4

2

td 内の要素を使用して、次のように高さを設定します。

<div style="display:block;height:30px;">header</div>
于 2013-02-05T12:02:44.467 に答える
0

高さは html 5 ではサポートされなくなり、html 4 では廃止されました。html5 を使用しているので、使用することをお勧めします。

スタイル="高さ:30px;"

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

于 2013-02-05T12:09:07.407 に答える
0

このコードを試してください:

 <!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>
于 2013-02-05T12:02:17.237 に答える
-1

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>
于 2013-02-05T12:08:51.133 に答える