スクロール可能なブートストラップテーブルの固定ヘッダー

Question

スクロール可能なブートストラップテーブルを作成しましたが、ヘッダーを修正します。私がプログラミングに慣れていないので、このための手順を詳細に説明してください。また、ライブラリがあればそれを教えてください。

これはテーブルです：TBODYへ

<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

セットの "高さ" と "オーバーフロー" CSS。

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

デモ：http://jsfiddle.net/T9Bhm/7/