row is visible behind sticky table header

Describe the bug

When using the sticky header I can see when scrolling part of the background row, and it looks kind of bad.

My table is defined as:

<b-table primary-key="id" :fields="fields" :items="nodes" :filter="filter" head-variant="light" sticky-header="77.3vh" show-empty hover bordered>

Also, setting the height to something like calc(100vh-100px) does not work.

Expected behavior

The background row should be completely hidden behind the header. I only found this to be an issue on chrome.

Versions

Libraries:

• BootstrapVue: ^2.0.0-rc.28
• Bootstrap: ^4.3.1
• Vue: ^2.6.10

Environment:

• OS: Windows 10
• Browser: Chrome 76.0.3809.132

[sprocket99]

no-border-collapse does fix the issue on v2.0.1 but it also makes the borders double as thick… taking the bordered off is not an option. Any workaround?

[tmorehouse]

That would make an assumption that all people are using the same default styles for the tables. You may need to target the header cell’s bottom border, not just the thead. Bootstrap v5 will be making some changes to how styles are applied to tables.

• https://github.com/twbs/bootstrap/issues/28480
• https://github.com/twbs/bootstrap/issues/29244