bootstrap-table - 如何将粘性标题扩展与 html 数据表一起使用?

标签 bootstrap-table

我将如何设置 html 表以使用粘性 header 并设置 StickyHeaderOffsetY 选项。

示例 https://bootstrap-table.com/docs/extensions/sticky-header/所有假设您正在使用 javascript 来填充表格,并且我找不到任何有关如何以其他方式设置选项的文档。

据我所知:

<table
    data-toggle="table"
    data-search="true"
    data-sticky-header="true"
    data-sortable="true"
    data-show-columns="true"
    class="table table-striped table-hover table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1abaea9af81a4b9a0acb1ada4efa2aeac" rel="noreferrer noopener nofollow">[email protected]</a></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be6eaf9f2cbeef3eae6fbe7eea5e8e4e6" rel="noreferrer noopener nofollow">[email protected]</a></td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f657a63764f6a776e627f636a216c6062" rel="noreferrer noopener nofollow">[email protected]</a></td>
      </tr>
    </tbody>
</table>

最佳答案

抱歉我无法发表评论,但是你尝试一下吗?

<table
  data-sticky-header="true"
  data-sticky-header-offset-y="60"
></table>

关于bootstrap-table - 如何将粘性标题扩展与 html 数据表一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57470272/

相关文章:

jquery - Bootstrap 表如何使用数据格式化程序中的输入框更改值

bootstrap-table - 如何删除引导表中选中/选中行中的文本,

localization - 如何使用本地化文件并覆盖 1 个本地化功能

javascript - 引导表服务器端分页的自定义参数

html - 引导表中的一列中的文本溢出

javascript - 从 $localstorage 检索变量

javascript - VueJS 在内联模板组件中重新编译 HTML

angular - 无法在 Angular 2 组件中插入引导表

javascript - 如何正确使用Bootstrap表的data-url属性?

javascript - bootstrap-table header 和 body 对齐方式不匹配