Закрепленная граница заголовка таблицы перекрывается <td>элементами

Question

Я использую пакет под названием ngx-virtual-scroller для реализации виртуального скроллинга для таблицы. У него есть возможность сделать заголовки липкими - для этого Javascript просто манипулирует translateY() из thead. Я также использую Bootstrap.

Проблема в том, что при прокрутке таблицы содержимое элементов <td> отображается поверх границ заголовка.

Ссылка на изображение

Код:

 <virtual-scroller #scroll [items]="items" [stripedTable]="true">
        <table class="table table-striped table-sm table-bordered">
            <thead #header>
                <th>Some header</th>
            </thead>
            <tbody #container>
                <tr>
                    <td> Some content </td>
                </tr>
            </tbody>
        </table>
</virtual-scroller>

virtual-scroller {
    height: calc(100% - 2rem);
    width: 100%;
    
    border-bottom: 1px solid #dee2e6;

    th {
        background-color: white;
        background-clip: padding-box;
    }
}

Изменение border-collapse на separate не работает. Использование box-shadow вместо границ не работает. Я его теряю!