Home > Article > Web Front-end > 如何实现嵌套表格的100%高度_html/css_WEB-ITnose
如何实现嵌套表格的100%高度_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:44:241681browse
表格嵌套 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页，表布局 之 高度。
表的高度计算在很大程度上留给用户代理决定。历史证明，各用户代理很可能有不同的做法，所以你要尽可能避免设置高度。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jsp_html/css_WEB-ITnoseNext article：帮忙修改下css代码，使得两组div可以inline_html/css_WEB-ITnose