Table elements appear under the table header when scrolling-CodePudding

I'm using Vue and bootstrap to create a table:

 <b-table 
                   striped
                   hover
                   responsive="true"
                   :no-border-collapse="true"
                   :items="items"
                   :fields="fields"
                   :sort-by.sync="sortBy"
                   primary-key="userId"
                   :sort-desc.sync="sortDesc"
                   :sticky-header="tableHeight"
                   sort-icon-left
          >

When I scroll the table, the sticky header works, but it doesn't look great because the elements from the body of the table are still visible under the header:

sticky header issue demo

Is there a way to preserve the stickiness but make the elements from the body of the table invisible if they are "under" the header?

CodePudding user response：

The background on your header is transparent, which is why you can see the body rows behind it.

You'll need to use CSS to make the background-color solid instead.