滚动时 Table 元素出现在 table header 下方

Question

我正在使用 Vue 和 bootstrap 创建一个 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
          >

当我滚动 table 时，粘性 header 有效，但它看起来不太好，因为 table 的 body 中的元素仍然存在header下可见：

sticky header issue demo

有没有办法保持粘性，但如果 table 的 body 中的元素位于 header“下方”，则它们不可见？

Answer 1

页眉的背景是透明的，这就是为什么您可以看到后面的正文行。

您需要使用 CSS 来制作 background-color 实体。

滚动时 Table 元素出现在 table header 下方

Table elements appear under the table header when scrolling

css

vue.js

bootstrap-vue