-1

I have created a scrollable Bootstrap table, but I want the header to be fixed. Kindly tell the steps to follow for this, in detail, as I am new to programming. Also tell me the libraries to include, if any.

This is the table:

<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>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
Priyanka Pachori
  • 53
  • 3
  • 10

1 Answers1

0

Set "height" and "overflow" CSS to tbody.

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

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

ItzMe_Ezhil
  • 1,276
  • 2
  • 11
  • 22