Do not scroll table headings when scrolling down a html table

Question

Richard JP Le Guen kindly provided me help when it comes to creating a scrolling html table. The only problem is that I don't want the table headings to scroll with the table rows. Now it worked in his example using span but if I use it in my table it really messes up my table headings. I have been for the last 2 hours try to get it sorted but I havn't so I have just left the table headings as it was.

So what question is that is there another way to be able to use css to make sure that table headings cannot be scrolled while scrolling down a table?

Below is my html and css code:

    <div id="tableWrapper">
    <div id="tableScroll">
    <table border=1 id="qandatbl" align="center">
    <thead>
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    <th class="col2">Weight(%)</th>
    <th class="col1">Answer</th>
    <th class="col2">Video</th>
    <th class="col1">Audio</th>
    <th class="col2">Image</th>
    </tr>
    </thead>
    <tbody>
        <tr>
    <td class="qid"><?php echo $i; ?></td>
    <td class="options"></td>
    <td class="duration"></td>
    <td class="weight"></td>
    <td class="answer"></td>
    <td class="video"></td>
    <td class="audio"></td>
    <td class="image"></td>
    </tr>
    </tbody>
</table>
</div>
</div>

            #qandatbl{
                font-size:12px;
                border-collapse:collapse;
                margin:0px;
                text-align:center;
                margin-left:auto; 
                margin-right:auto;
                border:1px solid black;
            }
            .col1{
            background-color:#FCF6CF;   
            }
            .col2{
            background-color:#FEFEF2;   
            }   
                .options{
            overflow:hidden;
            max-width:125px;       
            min-width:125px;
            background-color:#FCF6CF;
            border:1px solid black;
                }
            .duration{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border:1px solid black;
                }
            .weight{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FCF6CF;
            border:1px solid black;
                }
             .answer{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border:1px solid black;
                }
            .qid{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border:1px solid black;
                }
            .video{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FCF6CF;
            border:1px solid black;
                }
            .audio{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FEFEF2;
            border:1px solid black;
                }
            .image{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FCF6CF;
            border:1px solid black;
                }
             #tableWrapper {
  position:relative;
}
#tableScroll {
  height:350px;
  overflow:auto;  
  margin-top:20px;
}

Solution

check out How can I let a table's body scroll but keep its head fixed in place?

using this Pure CSS Scrollable Table with Fixed Header