如何实现嵌套表格的100%高度_html/css_WEB-ITnose-html教學-PHP中文網

如何实现嵌套表格的100%高度_html/css_WEB-ITnose

WBOY

發布： 2016-06-21 09:44:24

原創

1740 人瀏覽過

表格嵌套 100%高度

table2的高度100%无效
请问如何才能让其高度100%？

回复讨论(解决方案)

把其自身的margin，padding除了，再用

把其自身的margin，padding除了，再用

说的好像真的似的，请在上面的代码中加好样式，如果可以，分全部给你

border-collspace:collspace; 这个不好用么?

你看看这个是不是你想要的结果

<div style=" width:500px; height:400px;"><table id="table1" >    <tr>        <td style="height:120px;"> </td>        <td> </td>        <td> </td>    </tr>    <tr>        <td> </td>        <td class="detail">                    <table id="table2" >                <tr >                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr >                    <td> </td>                    <td> </td>                    <td> </td>                </tr>            </table>                            </td>        <td> </td>    </tr>    <tr>        <td style="height:20px;"> </td>        <td> </td>        <td> </td>    </tr></table></div>

登入後複製

#table1 {      width:100%;    height:100%;border:3px solid gray;border-collapse:collapse;}#table1 td {border: 1px solid gray;padding:0px;}#table2 {     width:100%;    height:100%;    margin:0px;border-collapse:collapse;}#table1 .detail {border-style: hidden;}#table2 td {border: 1px outset gray;}

登入後複製

你看看这个是不是你想要的结果

<div style=" width:500px; height:400px;"><table id="table1" >    <tr>        <td style="height:120px;"> </td>        <td> </td>        <td> </td>    </tr>    <tr>        <td> </td>        <td class="detail">                    <table id="table2" >                <tr >                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr >                    <td> </td>                    <td> </td>                    <td> </td>                </tr>            </table>                            </td>        <td> </td>    </tr>    <tr>        <td style="height:20px;"> </td>        <td> </td>        <td> </td>    </tr></table></div>

登入後複製

#table1 {      width:100%;    height:100%;border:3px solid gray;border-collapse:collapse;}#table1 td {border: 1px solid gray;padding:0px;}#table2 {     width:100%;    height:100%;    margin:0px;border-collapse:collapse;}#table1 .detail {border-style: hidden;}#table2 td {border: 1px outset gray;}

登入後複製

抱歉，关键点：table2的100%高度还是没起作

我要的是table2能够占满class="detail"这个单元格，而且table1外面的div高度变化的话，table2也能跟着变

用js/jquery配合吧

<!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> new document </title>  <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>  <script type="text/javascript">  <!--		$(function(){			var $table2 = $("#table2");			$table2.height($table2.parent().height());		})  //-->  </script> </head> <body><div style=" width:800px; height:600px;"><table id="table1" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">    <tr>        <td style="height:120px;"> </td>        <td> </td>        <td> </td>    </tr>    <tr>        <td> </td>        <td>                    <table id="table2" width="100%" border="1" cellspacing="0" cellpadding="0">                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>                <tr>                    <td> </td>                    <td> </td>                    <td> </td>                </tr>            </table>                            </td>        <td> </td>    </tr>    <tr>        <td style="height:20px;"> </td>        <td> </td>        <td> </td>    </tr></table></div> </body></html>

登入後複製

chrome下效果

刚才查了一下css权威指南，p370页，表布局之高度。
表的高度计算在很大程度上留给用户代理决定。历史证明，各用户代理很可能有不同的做法，所以你要尽可能避免设置高度。