高度为100%的table，怎么固定第一行的高度？-HTML教程-爱易网页

高度为100%的table，怎么固定第一行的高度？

日期：2014-05-17　浏览次数：20752 次

高度为100%的table，如何固定第一行的高度？？？

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head>
    <body style="height:100%; padding:0px; margin:0px;">
        <table style="width:100%; height:100%;">
            <tr style="height:30px; background-color:Blue;"> <td></td> </tr>
            <tr style="height:auto; background-color:Red;"> <td></td> </tr>
        </table>
    </body>
</html>

怎么让表格的第一行永远保持30px的高度，而整个表格随页面自动改变高度？

------解决方案--------------------
接楼上的, 第二行要有_padding-top:32px; 第一行高度超30PX的情况在里面嵌DIV就可以解决.
不过我发现第一行的border在IE6下很难显示出来

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>No Title</title>
<style type="text/css">
html, body { margin:0px; height:100%; padding:0px;}
#theTable { width:100%; height:100%; background-color:#fff;text-align:center;border-collapse:collapse;}
#theTable td{border:1px solid black;}

#theTable tr.firstTr {background-color:blue;width:100%;height:30px;_position:absolute; }
#theTable tr.firstTr td{border:1px solid black;}
#theTable tr.firstTr td div{height:30px;overflow:hidden;}

#theTable tr.secondTr {background-color:#ccc;width:100%;height:auto;vertical-align:top;}
#theTable tr.secondTr td{_padding-top:32px;}
</style>
</head>
    <body>
        <table id="theTable" border="0">
            <tr class="firstTr"> <td><div>a1<br />222<br />333</div></td><td>a2</td> </tr>
            <tr class="secondTr"> <td>b1</td><td>b2</td> </tr>
        </table>
    </body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

高度为100%的table，怎么固定第一行的高度？

相关资料更多>

推荐阅读更多>