title: Columns not matching between thead and tbody
body: <p>I have an application here: <a href="http://helios.hud.ac.uk/u0867587/Mobile_app/QandATable3.php" rel="nofollow">Application</a></p>
  
  <p>In the application please do the following:</p>
  
  <ol>
  <li><p>You will see a green plus button on left hand side, click on it and it will open up a modal window.</p></li>
  <li><p>In the search bar in the modal window type in the phrase <code>single</code> and submit search. A table will be shown below.</p></li>
  <li><p>Add a row from the table by clicking on the "Add" button, it will add the information in the top controls.</p></li>
  <li><p>Finally click on the "Add Question" button, this will append a table row underneath.</p></li>
  </ol>
  
  <p>Now the issue I have is that the columns in the <code>&lt;thead&gt;</code> and the columns in the <code>&lt;tbody&gt;</code> does not match. What my question is that how can I get these columns to match?</p>
  
  <p>HTML code is below showing the appended rows:</p>
  
  <pre><code>    var $tbody = $('#qandatbl &gt; tbody'); 
      var $tr = $("&lt;tr class='optionAndAnswer' align='center'&gt;");
      var $td = $("&lt;td class='extratd'&gt;");
      var $plusrow = $("&lt;td class='plusrow'&gt;&lt;/td&gt;");
      var $qid = $("&lt;td class='qid'&gt;&lt;/td&gt;").text(qnum);
      var $question = $("&lt;td class='question'&gt;&lt;/td&gt;");
      var $noofanswers = $("&lt;div class='noofanswers'&gt;2. Number of Answers:&lt;br/&gt;&lt;/div&gt;");
      var $options = $("&lt;div class='option'&gt;1. Option Type:&lt;br/&gt;&lt;/div&gt;");
      var $answer = $("&lt;div class='answer'&gt;3. Answer:&lt;br/&gt;&lt;/div&gt;");
      var $replies = $("&lt;td class='noofreplies'&gt;&lt;div class='wrapper'&gt;&lt;/div&gt;&lt;/td&gt;");
      var $weight = $("&lt;td class='weight'&gt;&lt;/td&gt;");
      var $image = $("&lt;td class='image'&gt;&lt;/td&gt;"); 
      var $video = $("&lt;td class='video'&gt;&lt;/td&gt;");
      var $audio = $("&lt;td class='audio'&gt;&lt;/td&gt;");
  
  ...
  
      $tr.append($plusrow);
      $tr.append($qid);
      $tr.append($question);
      $tr.append($td);
      $td.append($options);
      $td.append($noofanswers);
      $td.append($answer);
      $tr.append($replies);
      $tr.append($weight);   
      $tr.append($image);  
      $tr.append($video);
      $tr.append($audio);
      $tbody.append($tr); 
  </code></pre>
  
  <p>Below is the html table where it contains the table headings columns and where the table rows are appended to:</p>
  
  <pre><code>&lt;table id="qandatbl" align="center"&gt;
  &lt;thead class="tblhead"&gt;
  &lt;tr&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th class="qid"&gt;Question No&lt;/th&gt;
      &lt;th class="question"&gt;Question&lt;/th&gt;
      &lt;th class="optandans"&gt;Option and Answer&lt;/th&gt;
      &lt;th class="noofreplies"&gt;Number of Replies&lt;/th&gt;
      &lt;th class="weight"&gt;Number of Marks&lt;/th&gt;
      &lt;th class="image"&gt;Image&lt;/th&gt;
      &lt;th class="video"&gt;Video&lt;/th&gt;
      &lt;th class="audio"&gt;Audio&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody class="tblbody"&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Finally below is the CSS Code:</p>
  
  <pre><code>body{
      font-size:85%;  
  }           
  
  #qandatbl{
      border:1px black solid;
      border-collapse:collapse;
  }
  
  #qandatbl td { 
      vertical-align: middle;
  }
  
  #qandatbl th{
      border:1px black solid;
      border-collapse:collapse;
      text-align:center;
  }
  
  .tblhead, .tblbody {
      display: block;
  }
  
  .tblbody{
      height: 500px;
      overflow: auto;
      width:100%; 
  }
  
  .extratd{
      border:1px black solid;
      border-collapse:collapse;
  }
  
  .qid { 
      min-width:3%;
      max-width:3%;
      font-weight:bold;
      border:1px black solid;
      border-collapse:collapse;
  }
  
  .question { 
      min-width:25%;
      max-width:25%;
      border:1px black solid;
      border-collapse:collapse;
  }
  
  .noofanswers{
      min-width:100%;
      max-width:100%;
      padding-top:5%;
      padding-bottom:5%;
  }
  
  .noofreplies{
      min-width:3%;
      max-width:3%;
      border:1px black solid;
      border-collapse:collapse;
  }
  
  .optandans{
      min-width:30%;
      max-width:30%;
      border:1px black solid;
      border-collapse:collapse;
  }
  
  .option{
      min-width:100%;
      max-width:100%;
      padding-top:5%;
      padding-bottom:5%;
  }
  
  .weight { 
      min-width:3%;
      max-width:3%;
      border:1px black solid;
      border-collapse:collapse;
      }
  
  .answer { 
      min-width:100%;
      max-width:100%;
      padding-top:5%;
      padding-bottom:5%;
       }
  
  .audio{
      min-width:11%;
      max-width:11%;
      border:1px black solid;
      border-collapse:collapse;
      }
  
  .video{
      min-width:11%;
      max-width:11%;
      border:1px black solid;
      border-collapse:collapse;
      }
  
  .image{
      min-width:11%;
      max-width:11%;
      border:1px black solid;
      border-collapse:collapse;
      position:relative;
      }
  
  .plusrow{
      min-width:2%;
      max-width:2%;
      border:1px black solid;
      border-collapse:collapse;
      }
  </code></pre>
  
  <p>I have included a jsfiddle so you can look at a demo of it and test any ideas you have: <a href="http://jsfiddle.net/heA2b/1/" rel="nofollow">http://jsfiddle.net/heA2b/1/</a></p>