Содержимое внутри прокручиваемого 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 полосы прокрутки.Один рядом с телом таблицы (как и ожидалось), и на самой странице есть один.

Вот ссылка на кодовый блок: https://codepen.io/petetalksweb2/pen/WyeaWL?editors=1100

Любая помощь приветствуется.

Answer 1

Окружите его div с overflow: hidden;

CodePen