title: <thead> and <th> not match width of table
body: <p>If you look at all of my <code>&lt;th&gt;</code> tags in the <code>&lt;thead&gt;</code> tag in the table, you can see if each  has its own class: col1, col2, col3, col4... col9 I also have a <code>&lt;thead&gt;</code> in the table.</p>
  
  <p>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 <code>&lt;thead&gt; and &lt;th&gt;</code> is not going as wide as table, why is this.</p>
  
  <p>Below is table code:</p>
  
  <pre><code>&lt;div id="tableWrapper"&gt;
  &lt;div id="tableScroll"&gt;
  &lt;table id="qandatbl" align="center"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th class="col1"&gt;Question No&lt;/th&gt;
  &lt;th class="col2"&gt;Question&lt;/th&gt;
  &lt;th class="col3"&gt;Option Type&lt;/th&gt;
  &lt;th class="col4"&gt;Duration&lt;/th&gt;
  &lt;th class="col5"&gt;Weight(%)&lt;/th&gt;
  &lt;th class="col6"&gt;Answer&lt;/th&gt;
  &lt;th class="col7"&gt;Video&lt;/th&gt;
  &lt;th class="col8"&gt;Audio&lt;/th&gt;
  &lt;th class="col9"&gt;Image&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td class="qid"&gt;&lt;?php echo $i; ?&gt;&lt;/td&gt;
  &lt;td class="question"&gt;&lt;/td&gt;
  &lt;td class="options"&gt;&lt;/td&gt;
  &lt;td class="duration"&gt;&lt;/td&gt;
  &lt;td class="weight"&gt;&lt;/td&gt;
  &lt;td class="answer"&gt;&lt;/td&gt;
  &lt;td class="video"&gt;&lt;/td&gt;
  &lt;td class="audio"&gt;&lt;/td&gt;
  &lt;td class="image"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>
  
  </p>
  
  <p>Below is css;</p>
  
  <pre><code>            /*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`
  </code></pre>