BootstapVue table sticky header small imperfection/defect

Question

I recently met a problem with sticky-header function of BootstrapVue lib and I cannot find what to customize to make it work correctly.

Here is the thing:
Jsfiddle

<div id="app">
  <div>
    <b-table style="max-height: 50vh;" sticky-header bordered :items="items"></b-table>
  </div>
</div>

If you scroll down table you will see that above 'sticky-header' there is a rly small gap (I would say its 1px) by its pain in the eyes :D

here is screenshot:

I tryed inspect it in browser by cannot even find that header box..

And I would ask any CSS master to help with this to reduce this gap to zero :)

Answer 1

This could help you:

.b-table-sticky-header > .table.b-table > thead > tr > th { top: -1px }