<thead> and <th> not match width of table

Question

If you look at all of my <th> tags in the <thead> tag in the table, you can see if each has its own class: col1, col2, col3, col4... col9 I also have a <thead> in the table.

Now everything in the css is fine for the table except for my table headings. The problem is that I have a scrolling table, because I have a scrolling table I don't want my table headings to scroll with the table. Because of that I need this #tableWrapper thead tr, the problem though with this is the width of the thead and the width of the table headings (th), they are not going as wide as the whole table (99%), it is going approximately about 60% of the way, now if I didn't have a thead I will be able to get the table headings to its correct size and go as wide as the table, but this means the table headings will scroll with the table so I need the thead. But the problem is that the <thead> and <th> is not going as wide as table, why is this.

Below is table code:

<div id="tableWrapper">
<div id="tableScroll">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="col1">Question No</th>
<th class="col2">Question</th>
<th class="col3">Option Type</th>
<th class="col4">Duration</th>
<th class="col5">Weight(%)</th>
<th class="col6">Answer</th>
<th class="col7">Video</th>
<th class="col8">Audio</th>
<th class="col9">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="question"></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>

Below is css;

            /*css for QandATable.php*/

            #qandatbl{ //table
                font-size:14px;
                border-collapse:collapse;
                text-align:center;
                margin-left:auto; 
                margin-right:auto;
                width:99%;
            }
            .col1{
            background-color:#FEFEF2;
            width:7%;
            border: 1px solid black;
            }
            .col2{
            background-color:#FCF6CF;
            width:16%;
            border: 1px solid black;    
            }   
            .col3{
            background-color:#FEFEF2; 
        width:7%;
            border: 1px solid black;
            }
            .col4{
            background-color:#FCF6CF;
        width:7%;
            border: 1px solid black;
            }

           .col5{
            background-color:#FEFEF2;
            width:7%;
            border: 1px solid black;
            }
            .col6{
            background-color:#FCF6CF;
            width:7%;
            border: 1px solid black;    
            }   
            .col7{
            background-color:#FEFEF2; 
        width:16%;
            border: 1px solid black;
            }
            .col8{
            background-color:#FCF6CF;
        width:16%;
            border: 1px solid black;
            }
                .col9{
            background-color:#FCF6CF;
        width:16%;
            border: 1px solid black;
            }

#tableWrapper {
  position:relative;
}
#tableScroll {
  height:300px;
  overflow:auto;  
  margin-top:20px;
}

#tableWrapper thead {
position:absolute;
top:-24px;
width:99%;
}`enter code here`

Answer 1

This seems to work in IE 6+ and Firefox. Please let me know what others do or do not work:

http://spruce.flint.umich.edu/~jalarie/jaa_kee.htm

Answer 2

From what I have seen you can't do this with just CSS.

HTML table with fixed headers?

HTML table with fixed headers and a fixed column?

There are a few solutions in those links above, but they all fall apart at some part (IE7, Safari and IE9 being the major culprits. If you really want this I would think about using javascript. There area number of jQuery plugins that can accomplish this.