我正在写一个页面，我需要一个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; }
像这样吗
http://jsfiddle.net/TweNm/
这个想法是将其包装<table>在<div>具有overflow:autoCSS属性的非静态位置。然后将元素放置在<thead>绝对位置。
<table>
<div>
overflow:auto
<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>
