Fixed Header in einer scrollbaren Bootstrap-Tabelle

Question

Ich habe eine scrollbare Bootstrap-Tabelle erstellt, aber ich möchte die Kopfzeile behoben werden. Bitte sagen Sie mir die Schritte, die Sie im Detail befolgen müssen, da ich neu in der Programmierung bin. Sag mir auch, die Bibliotheken, falls vorhanden.

Dies ist die Tabelle:

<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

Set "Höhe" und "Überlauf" CSS tbody.

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

Demo: http://jsfiddle.net/T9Bhm/7/