gpt4 book ai didi

html - IE9嵌套表格父td的填充高度

转载 作者:太空宇宙 更新时间:2023-11-03 18:26:39 24 4
gpt4 key购买 nike

我正在尝试嵌套表格,我希望嵌套表格的高度等于其容器的高度。

<!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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com