如何使表头不可滚动引导 vue

Posted 2023-02-22

【中文标题】如何使表头不可滚动引导 vue

【英文标题】：How to make table headers non scrollable bootstrap vue

【发布时间】：2020-01-08 12:03:03

【问题描述】：

我是 bootstrap vue 的新手。我在整个应用程序中使用了 bootstrap-vue 1.4，在我的表中使用了 b-table，但是表头在滚动时也会移动我想让它们保持粘性或不可滚动我发现使用新的 bootstrap-vue 2.0 有一个选项 sticky-header 但我不能使用它，因为我可能会破坏我的应用程序有没有办法使用 bootstrap-vue 1.4 使标题保持粘性

【参考方案1】：

 .table.b-table>thead>tr>th 
  background-color: white;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 2;
 

这个东西对我有用，在 app.vue 中使用它应该可以修复所有的 b-tables

【讨论】：

这肯定会起作用，但需要注意的是它会覆盖页眉/页眉单元格上使用的任何颜色变体。只要记住将表格包装在一个可垂直滚动的 div 中

我的 BootstrapVue 项目中的sticky header 属性不起作用。但有了这个，它就像一个魅力。

【参考方案2】：

粘性标题是一种“粘性”情况。只有 <td> 和 <th> 元素可以设置为“粘性”（通过 css position: sticky）。表格本身需要包裹在一个固定高度垂直可滚动的<div>。

请注意，Bootstrap V4.x CSS 没有表格单元格继承其父级的背景颜色（请参阅 Bootstrap 存储库中的 this issue）。所以你会发现背景颜色（包括默认的纯白色）和边框会随着正文滚动（标题单元格将保持透明），从而使结果不会过于出色。您需要确保每个标题单元格 (<th>) 具有纯色背景。

BootstrapVue 2.0.0.rc-28 必须添加相当多的 SCSS/CSS 和条件 javascript 行为来处理这个问题。

【讨论】：

我已经尝试将我的 Bootstrap 升级到 4.3.1 并将 bootstrap-vue 升级到 2.0.0-rc.28 粘性表头在这里工作正常，但它破坏了整个应用程序，因为某些类发生了变化。所以我不能真正升级到 bootstrap-vue 2.0.0-rc.28，因为它需要很多时间来查找和修复每个流程

有没有固定高度的办法？

【参考方案3】：

你试过css Sticky吗？

将类添加到您的b-table 组件并使用此类添加：

.myclass 
    position: sticky;

或者选择表头，这里是完整的例子：

.myclass > thead 
    position: sticky;
    top: 0px; // try more if you have page header/navbar
    display: inherit; // try this and width below to be sure thead response to sticky behavior.
    width: 100%;

【讨论】：

可能是.myclass table > theader?

语法错误？我会说使用这个选择器。不复制/粘贴为它自己。我会更新我的回复...

<thead> 元素（也不是<tr>）不能（很容易）被粘住。只有<td> 和<th> 元素可以很容易地变成粘性元素（通过position: sticky），而无需更改元素的显示类型（这会改变它们对屏幕阅读器用户的语义含义）

【参考方案4】：

现在实现了粘性标题：https://bootstrap-vue.js.org/docs/components/table#sticky-headers