如何固定此 bootstrap-vue 表中显示列名称的顶部标题行？

Question

我有一个 bootstrap-vue 表，看起来像这样；

这是代码；

<template>
  <div>
    <b-table hover :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          {
            age: 89,
            first_name: 'Geneva',
            last_name: 'Wilson',
            _rowVariant: 'danger'
          },
          {
            age: 40,
            first_name: 'Thor',
            last_name: 'MacDonald',
            _cellVariants: { age: 'info', first_name: 'warning' }
          },
          { age: 29, first_name: 'Dick', last_name: 'Dunlap' }
        ]
      }
    }
  }
</script>

假设表格有很多行。我想固定顶部标题行，以便当我向下滚动表格时，显示列名称的标题行保留在顶部。这使表格更具可读性。

bootstrap-vue 文档中提供了表代码。

https://bootstrap-vue.org/docs/components/table

我正在使用 Vue v2.6 和 BootstrapVue。

Answer 1

您需要使用

设置相关元素的样式

position: sticky;

参见：https://developer.mozilla.org/en-US/docs/Web/CSS/position

您还有演示：

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

<div class="sticky">foo</div>
<div style="height: 2000px;"></div>

因此，您需要查看 Vue 为您生成的结构是什么，并确保将

position: sticky;

样式设置为

position

需要为

sticky

的元素。