我正在尝试嵌套表格，我希望嵌套表格的高度等于其容器的高度。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="wrapper">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="has-nested-table">
<table>
<tbody>
<tr>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j with some other letters because he has been so lonely lately</td>
<td class="has-nested-table">
<table>
<tbody>
<tr>
<td>k</td>
<td>l</td>
</tr>
</tbody>
</table>
</td>
<td>m</td>
<td>n</td>
</tr>
<tr>
<td>o</td>
<td>p</td>
<td>q</td>
<td class="has-nested-table">
<table>
<tbody>
<tr>
<td>r</td>
<td>s</td>
</tr>
<tr>
<td>t</td>
<td>u</td>
</tr>
<tr>
<td>v</td>
<td>w</td>
</tr>
</tbody>
</table>
</td>
<td>x</td>
<td>y</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这是 CSS * { margin :0； 大纲:0； 填充:0
html, body
{
font:normal 11px/1.4 Helvetica, Arial, Sans-Serif;
height:100%
}
.wrapper
{
margin:0 auto;
padding:0 10px;
width:940px
}
table
{
border-collapse:collapse;
height:100%;
table-layout:fixed;
width:100%
}
thead
{
background:#595959;
border:1px solid #595959
}
tbody, tr
{
height:100%
}
th
{
color:#f5f5f5
}
th, td
{
padding:5px
}
td
{
border:1px solid #ccc;
text-align:center;
vertical-align:top
}
td.has-nested-table
{
padding:0
}
td table
{
height:100%
}
td td
{
border-bottom:0;
border-left:0;
border-top:0;
vertical-align:top
}
td td:last-child
{
border:0
}
嵌套表格在 firefox 和 chrome 中扩展，但在 IE9 中不扩展。帮助!
最佳答案
添加这个css然后试试
td.has-nested-table table{
height: auto;
}
关于html - IE9嵌套表格父td的填充高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20649394/