Question

我创建了一个可滚动的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>

Answer 1

将“height”和“overflow”CSS设置为tbody。

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

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

修复了可滚动Bootstrap表中的标头

1 个答案: