可滚动 div 内的内容，导致 IE 中出现页面滚动条

Question

我正在尝试将粘性标题合并到我公司的内部数据表组件中。我让它工作的最好方法（使用 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 个滚动条。表格主体旁边的一个（如预期的那样），页面本身也有一个。

这里是 codepen 的链接：https://codepen.io/petetalksweb2/pen/WyeaWL?editors=1100

感谢任何帮助。

Answer 1

用div和overflow: hidden;包围它

CodePen