bulma -- sticky -- 表格

一种方便布玛的方式,可以贴上桌头,桌脚,第一列,或者全部三个!

见它的行动

安装

下载一个发布, 或者从 npm 抓取代码 .

Bulma v1 或更新

npm install @cityssm/bulma-sticky-table

Bulma v. 9.4 或 更长时间

npm install @cityssm/[email protected]

使用量

创建样式表时,导入 _sticky-table.scss 你进口了布玛之后. 这将确保使用您的色彩定制 .

@import 'bulma/bulma';
@import '@cityssm/bulma-sticky-table/sticky-table';

或者,如果你使用 Bulma 没有任何定制, 您可以替换您的 Bulma 样式表 bulma-with-sticky-tables.css。 。 。 .

<link
  rel="stylesheet"
  href="path/to/cityssm/bulma-sticky-table/bulma-with-sticky-table.css"
/>

需要CDN吗? 检查出来 JS 交付。 。 。 .

按照惯例,使用 Bulma 表格文档 作为你的向导.

然后,将以下课程的任何组合加入到您的 <table> 标签.

使用 .has-sticky-header 贴上头部.

• 注意信头应位于 <thead> 标记,每个单元格应使用 <th> 标签.

使用 .has-sticky-footer 贴上脚印.

• 注意脚下应位于 <tfoot> 标记,每个单元格应使用 <th> 标签.

使用 .has-sticky-column 坚持第一纵队.

• 注意每个表格行中的第一个单元格应使用 <th> 标签.

说明 .table-container

布尔玛人 .table-container 环绕 a .table 来帮助滚动 在大桌子旁边 基本思想是,容器改变 overflow CSS对容器有规定. 这会影响 .table坚持的能力 正如你所期望的那样.

虽然 .has-sticky-column 可能会像预期的那样工作, .has-sticky-header 财务报告和审定财务报表 .has-sticky-footer 可能不会。 有两个选择:

1. 删除 .table-container 总共,并使用 .table 也一样 想要的粘性课程.

2. 添加一些额外的样式到 .table-container 更改垂直溢出规则 在容器上设置一个特定的高度。 下面的例子使用屏幕高度. 更小的也许更好 取决于您的申请.

<div class="table-container" style="overflow-y:auto;max-height:100vh;">
  <table>
    <thead>
      ...
    </thead>
    <tbody>
      ...
    </tbody>
  </table>
</div>

谢谢

灵感来自 cSS- Tricks 上的代码。 。 。 .