【问题标题】: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>

【问题讨论】:

    标签: html css twitter-bootstrap


    【解决方案1】:

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-12-11
      • 2011-09-25
      • 2013-06-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-15
      • 2017-07-11
      相关资源
      最近更新 更多