title: Do not scroll table headings when scrolling down a html table
body: <p>Richard JP Le Guen kindly provided me help when it comes to creating a scrolling html table. The only problem is that I don't want the table headings to scroll with the table rows. Now it worked in his example using span but if I use it in my table it really messes up my table headings. I have been for the last 2 hours try to get it sorted but I havn't so I have just left the table headings as it was.</p>
  
  <p>So what question is that is there another way to be able to use css to make sure that table headings cannot be scrolled while scrolling down a table?</p>
  
  <p>Below is my html and css code:</p>
  
  <pre><code>    &lt;div id="tableWrapper"&gt;
      &lt;div id="tableScroll"&gt;
      &lt;table border=1 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;Option Type&lt;/th&gt;
      &lt;th class="col1"&gt;Duration&lt;/th&gt;
      &lt;th class="col2"&gt;Weight(%)&lt;/th&gt;
      &lt;th class="col1"&gt;Answer&lt;/th&gt;
      &lt;th class="col2"&gt;Video&lt;/th&gt;
      &lt;th class="col1"&gt;Audio&lt;/th&gt;
      &lt;th class="col2"&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="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;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
              #qandatbl{
                  font-size:12px;
                  border-collapse:collapse;
                  margin:0px;
                  text-align:center;
                  margin-left:auto; 
                  margin-right:auto;
                  border:1px solid black;
              }
              .col1{
              background-color:#FCF6CF;   
              }
              .col2{
              background-color:#FEFEF2;   
              }   
                  .options{
              overflow:hidden;
              max-width:125px;       
              min-width:125px;
              background-color:#FCF6CF;
              border:1px solid black;
                  }
              .duration{
              overflow:hidden;
              max-width:125px;
              min-width:125px;
              background-color:#FEFEF2;
              border:1px solid black;
                  }
              .weight{
              overflow:hidden;
              max-width:125px;
              min-width:125px;
              background-color:#FCF6CF;
              border:1px solid black;
                  }
               .answer{
              overflow:hidden;
              max-width:125px;
              min-width:125px;
              background-color:#FEFEF2;
              border:1px solid black;
                  }
              .qid{
              overflow:hidden;
              max-width:125px;
              min-width:125px;
              background-color:#FEFEF2;
              border:1px solid black;
                  }
              .video{
              overflow:hidden;
              max-width:350px;
              min-width:350px;
              background-color:#FCF6CF;
              border:1px solid black;
                  }
              .audio{
              overflow:hidden;
              max-width:350px;
              min-width:350px;
              background-color:#FEFEF2;
              border:1px solid black;
                  }
              .image{
              overflow:hidden;
              max-width:350px;
              min-width:350px;
              background-color:#FCF6CF;
              border:1px solid black;
                  }
               #tableWrapper {
    position:relative;
  }
  #tableScroll {
    height:350px;
    overflow:auto;  
    margin-top:20px;
  }
  </code></pre>