스크롤 가능한 부트 스트랩 테이블의 고정 헤더

Question

스크롤 가능한 부트 스트랩 테이블을 만들었지 만 헤더를 수정하고 싶습니다. 프로그래밍을 처음 접했을 때,이를 위해 따라야 할 단계를 자세히 알려주십시오. 또한 포함 할 도서관을 알려주십시오.

<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

설정 "높이"및 TBODY에 "오버 플로우"CSS :

이

는 테이블입니다.

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

데모 : http://jsfiddle.net/T9Bhm/7/