如何在HTML表格上显示滚动条

Question

我正在写一个页面，我需要一个html表来保持设置的大小。我需要表顶部的标题始终保持在该位置，但是无论表中添加了多少行，我都需要表的主体进行滚动。

我希望它看起来像此URL中的方法2：http :
//www.cssplay.co.uk/menu/tablescroll.html

我尝试这样做，但是没有滚动条出现：

    <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>

CSS：

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

Answer 1

像这样吗

http://jsfiddle.net/TweNm/

这个想法是将其包装<table>在<div>具有overflow:autoCSS属性的非静态位置。然后将元素放置在<thead>绝对位置。

#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>