title: How to keep table headers fixed while scrolling down a table
body: <p>I have a jsfiddle here: <a href="http://jsfiddle.net/7vv9e/2/" rel="nofollow">http://jsfiddle.net/7vv9e/2/</a></p>
  
  <p>In this fiddle when you open it up and you see the little demo, click on the "Add Question" button multiple times until you see a scroll bar appear next to the table. </p>
  
  <p>Now what I want to happen is tht when the user scrolls, the header remainns fixed while scrolling. My question is how can this be done.</p>
  
  <p>Below is the css code where it displays the scroll bar for the table when the table reaches a certain height:</p>
  
  <pre><code>#details{
      height:500px;
      overflow:auto;
  }
  </code></pre>
  
  <p>i.e The current table you see in the demo is not the final table. There will be more columns added. So I need a solution where it could work for a table with 2 columns or a table with 5 columns it doesn't matter on the width of the column, if each column can remain it's same width without any problems while scrolling down then this could be great.</p>
  
  <p>Thanks</p>