I am creating a table which scrolls on both x and y direction. The issue is when I am scrolling down headers are hidden. What am I doing wrong? How to avoid it?

Code -

js-

```
$(document).ready(function() {
    $('#myTable01').dataTable({
        "iLoadGap" : 0,
        "bPaginate" : false,
        "bInfo" : false,
        "bFilter" : false,
        "bSort" : true,
        "aaSorting" : [ [ 1, "desc" ] ],
        "aoColumns" : [ null, null, null, null,null, null, null, null,null, null, null, null,null, null, null, null,null, null, null, null,null, null, null, null,null, null, null, null,null, null ]
    });
});

```

body part -

```
<div class="data"  style="width:1180px; height:510px; overflow:auto;">

<table id="myTable01" width="100%" cellpadding="0" cellspacing="0"  style="margin: 0;padding-bottom:0;padding-top:0">
<thead   >
<tr >                                                           
<th  align="left"   rowSpan="1" colSpan="1"> col1 </th>
<th  align="left"   rowSpan="1" colSpan="1"> col2 </th>                     
<th  align="left"   rowSpan="1" colSpan="1">col3 </th>
<th  align="left"   rowSpan="1" colSpan="1">col4 </th>
<th  align="left"   rowSpan="1" colSpan="1">col5 </th>
<th  align="left"   rowSpan="1" colSpan="1">col6 </th>
<th  align="left"   rowSpan="1" colSpan="1">col7 </th>
<th  align="left"   rowSpan="1" colSpan="1">col8 </th>
<th  align="left"   rowSpan="1" colSpan="1">col9 </th>
<th  align="left"   rowSpan="1" colSpan="1">col10 </th>
<th  align="left"   rowSpan="1" colSpan="1">col11</th>
<th  align="left"   rowSpan="1" colSpan="1">col12 </th>
<th  align="left"   rowSpan="1" colSpan="1">col13 </th>
<th  align="left"   rowSpan="1" colSpan="1">col14 </th>
<th  align="left"   rowSpan="1" colSpan="1">col15 </th>
<th  align="left"   rowSpan="1" colSpan="1">col16 </th>
<th  align="left"   rowSpan="1" colSpan="1">col17 </th>
<th  align="left"   rowSpan="1" colSpan="1">col18 </th>
<th  align="left"   rowSpan="1" colSpan="1">col19 </th>
<th  align="left"   rowSpan="1" colSpan="1">col20 </th>
<th  align="left"   rowSpan="1" colSpan="1">col21 </th>
<th  align="left"   rowSpan="1" colSpan="1">col22 </th>
<th  align="left"   rowSpan="1" colSpan="1">col23 </th>
<th  align="left"   rowSpan="1" colSpan="1">col24</th>
<th  align="left"   rowSpan="1" colSpan="1">col25 </th>
 <th  align="left"   rowSpan="1" colSpan="1">col26 </th>
    <th  align="left"   rowSpan="1" colSpan="1">col27 </th>
    <th  align="left"   rowSpan="1" colSpan="1">col28 </th>
    <th  align="left"   rowSpan="1" colSpan="1">col29</th>
    <th  align="left"   rowSpan="1" colSpan="1">col30 </th>
</tr>
</thead>

```

please help