Q:

fix table header with rowspan and colspan property and scrollable

i want to make a table header fix to one position and allow the remaining content of table to be scrollable(code below). I am using colspan and rowsapn property in the table header row . Is there any way to fix it ?
<html>
   <body> 
   <div id="secondtable" style="width:100%; height:380px; overflow:auto;">
   <table class="mytable" style="width:100%; border-width:thin;" border="1"      cellpadding="9" cellspacing="0" align="center">    
                <tr class="tt" bgcolor="#0B2B62">
                    <th>No.</th>
                    <th>Store Name</th>
                    <th>Receipts</th>
                    <th colspan=2>Receipts vs Budget</th>
                    <th colspan=3>Receipts vs Last Year</th>
                    <th>Contribution</th>
                    <th colspan=2>Contribution vs Budget</th>
                </tr>
                <tr class="tt" style="background-color:#C2C2C2;">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><font color="black">Var &pound;</font></td>
                    <td><font color="black">Var %</td>
                    <td><font color="black">Var &pound;</font></td>
                    <td><font color="black">Var %</font></td>
                    <td><font color="black">Var</font></td>
                    <td></td>
                    <td><font color="black">Var &pound;</font></td>
                    <td><font color="black">Var %</font></td>
                </tr>
                <tr class="tt" style="background-color:#D7F2FF">
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
        </table>
</div>
</body>
</html>

//this is css
table {

border-collapse:separate;
border-spacing: 0;
color:white;
background-color:white;
border: 1px solid black;
border-radius: 8px;
-moz-border-radius: 5px;
padding: 5px;
font-family:sans-serif;
}

.mytable{
background-color:#014483;
}

.tt{
border-color:#2B4F81;
}
.ttt{
background-color:#BBDBF4;
border:#2B4F81;
}

A:

Question of 3 years old,however for those who still have no solution for this (table head with rowspan) I finally have the methode using js.
<div id="table">
 <table>
   <thead>
     <!-- your head code -->
   </thead>
   <tbody>
     <!-- your body code -->
   </body>
 </table>
</div>

CSS
#table{
    height:200px; //for example 
    overflow-y:auto; 
}

JS
let statusCard = document.querySelector('#table');
    // add scroll event listener for change head's position 
    statusCard.addEventListener('scroll',e =>{
      let tableHead = document.querySelector('thead');
      let scrollTop =  statusCard.scrollTop;
      tableHead.style.transform = 'translateY(' + scrollTop + 'px)';
})

