引导表固定标题不起作用

Posted 2023-05-08

【中文标题】引导表固定标题不起作用

【英文标题】：bootstrap-table fixed header not working

【发布时间】：2015-06-29 04:01:31

【问题描述】：

我使用bootstrap-table 在我的项目中设置了一个表格。除了tbody 内的滚动条外，一切正常。

那里没有滚动条。我错过了什么？我相信如果滚动条可见，那么表格功能的fixed-header 也应该可以正常工作。

<table id="tblMain" class="table table-bordered table-hover" data-show-refresh="false" data-click-to-select="false" data-single-select="true" data-show-toggle="false" data-show-columns="false" data-cache="false" data-page-number="@Model.CommonVariable" data-url='@Url.Action("Index", "Home")'  data-side-pagination="server" data-pagination="true" data-search="false" data-query-params="queryParams" data-response-handler="respHandler">
    <thead class="table-head">
        <tr>
            <th data-field="id" data-formatter="SomeFunction">Item ID</th>
            <th data-field="name" data-formatter="SomeFunction2">Item Name</th>
            <th data-field="price" data-formatter="SomeFunction3">Item Price</th>
        </tr>
    </thead>
</table>

【参考方案1】：

看看这个fiddle...

这不是我创建的，但我认为这是您正在寻找的。

    table 
        table-layout:fixed;
    

    .div-table-content 
      height:150px;
      overflow-y:auto;
    

【参考方案2】：

您可以将data-height 选项设置为活动的固定标头功能，例如：http://issues.wenzhixin.net.cn/bootstrap-table/。

【讨论】：

data-height="100vh" 似乎不起作用。是否可以将data-height 设置为非像素单位？