<thead> and <th> not matching table width

If you look at all of my <th> tags in the <thead> tag in the table, you can see if each <th> 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>
</table>
</div>
</div>

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`

Its because you have removed the thead from the flow so it no longer takes part in that table and won’t react to the table width.

That’s the problem with this method and you can’t really do much with the removed content. I have a few old demos where I explored this before but had to settle for a full width background colour. The cells were kept at the right width by using a tfoot element to created the correct widths and then absolutely placing the inner content and not the thead.

http://www.pmob.co.uk/temp/scroll-table-fixed-headfoot-100.htm
http://www.pmob.co.uk/temp/table-fixed-header-example.htm

We actually had a quiz on this a couple of years ago so you may be interested to see how much thought has gone into this: