How to display scroll bar onto a html table

Question

I am writing a page where I need an html table to maintain a set size. I need the headers at the top of the table to stay there at all times but I also need the body of the table to scroll no matter how many rows are added to the table.

I want it to look like method 2 in this url: http://www.cssplay.co.uk/menu/tablescroll.html

I have tried doing this but no scrollbar appears:

tbody {   height: 80em;   overflow: scroll; }

<table border=1 id="qandatbl" align="center">   <tr>     <th class="col1">Question No</th>     <th class="col2">Option Type</th>     <th class="col1">Duration</th>   </tr>    <tbody>     <tr>       <td class='qid'></td>       <td class="options"></td>       <td class="duration"></td>     </tr>   </tbody> </table>

Answer 1

Something like this?

http://jsfiddle.net/TweNm/

The idea is to wrap the <table> in a non-statically positioned <div> which has an overflow:auto CSS property. Then position the elements in the <thead> absolutely.

#table-wrapper {    position:relative;  }  #table-scroll {    height:150px;    overflow:auto;      margin-top:20px;  }  #table-wrapper table {    width:100%;    }  #table-wrapper table * {    background:yellow;    color:black;  }  #table-wrapper table thead th .text {    position:absolute;       top:-20px;    z-index:2;    height:20px;    width:35%;    border:1px solid red;  }

<div id="table-wrapper">    <div id="table-scroll">      <table>          <thead>              <tr>                  <th><span class="text">A</span></th>                  <th><span class="text">B</span></th>                  <th><span class="text">C</span></th>              </tr>          </thead>          <tbody>            <tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>            <tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>            <tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>            <tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>            <tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>            <tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>            <tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>            <tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>            <tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>            <tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>            <tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>            <!-- etc... -->            <tr> <td>1, 99</td> <td>2, 99</td> <td>3, 99</td> </tr>          </tbody>      </table>    </div>  </div>