我正在尝试将粘性 header 合并到我公司的内部数据表组件中。我让它工作(使用 Chrome)的最好方法是生成如下内容:
<table class="headers">
<thead> // ... header stuff</thead>
<tbody> // ... body stuff</tbody>
</table>
<div class="scrollBody">
<table class="headers">
<thead> // ... header stuff</thead>
<tbody> // ... body stuff</tbody>
</table>
</table>
和这样的css:
th {
border: 1px solid black;
}
.headers tbody {
visibility: collapse;
}
.scrollBody thead {
visibility: collapse;
}
.scrollBody {
display: inline-block;
max-height: 250px;
overflow: auto;
}
这在 Chrome 中完全符合要求。它显示一个带有标题的表格和一个滚动表格主体的滚动条。然而,在 IE 中,它看起来是正确的,直到您意识到页面现在有 2 个滚动条。一个在表体旁边(正如预期的那样),页面本身也有一个。
这是代码笔的链接:https://codepen.io/petetalksweb2/pen/WyeaWL?editors=1100
感谢任何帮助。
最佳答案
用 div
和 overflow: hidden;
关于html - 可滚动的div里面的内容,导致在IE中出现页面滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50574106/