日期:2014-05-17  浏览次数:20695 次

高度为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>