title: How to create a scrolling table with fixed headers
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/673153/html-table-with-fixed-headers">HTML table with fixed headers?</a>  </p>
  </blockquote>
  
  
  
  <p>I want to know what is the best way of creating a scrolling table with fixed headers for this fiddle here: <a href="http://jsfiddle.net/LKB9e/9/" rel="nofollow noreferrer">http://jsfiddle.net/LKB9e/9/</a></p>
  
  <p>I don't want separate table headers and table body and I want the columns to stay matching.</p>
  
  <p>Can somebody get my fiddle working to match this?</p>
  
  <p>To use fiddle just click on the "Add Question" button in the demo and it will keep appending rows into a table below.</p>
  
  <p>At moment the table is scrolling with no fixed headers which is done by this:</p>
  
  <pre><code>#details{
      height:500px;
      overflow:auto;
  }
  </code></pre>
  
  <p>Below is the source code:</p>
  
  <p>HTML table:</p>
  
  <pre><code>&lt;table id="questionBtn" align="center"&gt;
  &lt;tr&gt;
      &lt;th&gt; &lt;input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" /&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;hr/&gt;
  &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>Below is the javascript code where it append rows into the html table above:</p>
  
  <pre><code>function insertQuestion(form) {   
  
  
      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 css:</p>
  
  <pre><code>            /*css for QandATable.php*/
  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>UPDATE:</p>
  
  <p>I have attempted created a scrolling table with fixed headers but problem is that columns are not matching: <a href="http://jsfiddle.net/heA2b/1/" rel="nofollow noreferrer">http://jsfiddle.net/heA2b/1/</a></p>