修复了可滚动引导表中的标题[重复]

Posted 2023-03-05

【中文标题】修复了可滚动引导表中的标题[重复]

【英文标题】：Fixed header in a scrollable Bootstrap table [duplicate]

【发布时间】：2016-10-26 20:07:30

【问题描述】：

我创建了一个可滚动的 Bootstrap 表，但我希望修复标题。请详细说明要遵循的步骤，因为我是编程新手。如果有的话，还告诉我要包含的库。

这是桌子：

<div class="panel-body" id="variableCategorizationBody">
    <div id="categorizeChannel" style="overflow-x:auto;">
        <table id="categorizationTable" data-toggle="table" data-checkbox-header="true" data-search="true" data-click-to-select="true" data-search-align="right" data-smart-display="true" class="tableHeader th" style="width:auto;">
            <thead>
                <tr>
                    <!-- Bootstrap Table -->
                    <th data-field="id" data-visible="false"></th>
                    <th class="col-lg-4 " data-field="varname" data-title="Variable" data-align="left" data-sortable="true" data-halign="left"></th>
                    <th class="col-lg-5 " data-field="aliasName" data-title="Alias" data-align="left" data-formatter="inputAliasFormatter" data-sortable="true" data-halign="left"></th>
                    <!-- The data-formatter is the property of bootstrap table. A method with the name inputAliasFormatter should be present.
                                     This method customizes the bootstrap table with the input text box into the second column -->
                    <th class="col-lg-3 " data-field="vartype" data-title="Change variable type" data-align="left" data-formatter="categorySelector" data-sortable="false" data-halign="left"></th>

                    </th>
                </tr>
            </thead>
        </table>

    </div>
</div>

【参考方案1】：

将“高度”和“溢出”CSS 设置为 tbody。

   table tbody 
    height:300px;
     overflow-y: auto;
    

演示：http://jsfiddle.net/T9Bhm/7/