'How to freeze thead section of the table

I have a table contains two header rows Demo.

<thead>
    <tr>
       <th colspan="4"><big>Variable Details</big></th>
    </tr>
    <tr>               
       <th>Variable Name</th>
       <th>Starting Value</th>
       <th>Default Value</th>
       <th>Description</th>
     </tr>
 </thead>

I want to freeze the top two header rows (thead section of the table). Any thoughts.

javascriptjqueryhtmlcss


Solution 1:[1]

After referring many web-site links, I am able to fix two header rows using pure CSS. Updated fix. 

<div id="header-wrap"><b>Variable Details</b>

     <table border=1 cellpadding=0 cellspacing=0 width=100% style="margin-top:5px">

            <thead>
            <tr>            
                  <td  background-color:#E0EBEB;"><b>Variable Name</b></td>
                 <td  background-color:#E0EBEB;"><b>Starting Value</b></td>
                  <td  background-color:#E0EBEB;"><b>Default Value</b></td>
                  <td  background-color:#E0EBEB;"><b>Description</b></td>
            </tr>      
            </thead>
            </table>
</div>

CSS:

#header-wrap { position: fixed; width: 100%; height: 55px; top: 0; text-align:center; background-color:#F0F0F0; margin-top:0px; margin-bottom:40px;}
             td {width:25% }

Solution 2:[2]

Change the CSS property position to "sticky" in order to get a sticky table head. See below.

CSS:

.providers thead { position: sticky; top: 0px; z-index: 10; }

NOTE: You may have to adjust your z-index depending on your other CSS properties.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MIM
Solution 2 BradTheBluefish

Related Questions