Maison > Article > interface Web > 如何实现嵌套表格的100%高度_html/css_WEB-ITnose
如何实现嵌套表格的100%高度_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:44:241681parcourir
表格嵌套 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页，表布局 之 高度。
表的高度计算在很大程度上留给用户代理决定。历史证明，各用户代理很可能有不同的做法，所以你要尽可能避免设置高度。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jsp_html/css_WEB-ITnoseArticle suivant：帮忙修改下css代码，使得两组div可以inline_html/css_WEB-ITnose