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

Question

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

我希望它看起来像这个网址中的方法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

接受的答案提供了一个很好的起点，但如果您调整框架大小，更改列宽，甚至更改表格数据，标题将以各种方式搞砸。我见过的每个其他例子都有类似的问题，或者对表的布局施加了一些严格的限制。不过，我想我终于解决了所有这些问题。它占用了大量的CSS，但最终产品与普通表一样可靠且易于使用。这是一个示例，它具有复制OP引用的表所需的所有功能：jsFiddle必须更改颜色和边框以使其与参考相同。CSS注释中提供了有关如何进行这些更改的信息。这是代码：/*the following html and body rule sets are required only if using a % width or height*//*html {width: 100%;height: 100%;}*/body {&nbsp; box-sizing: border-box;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; margin: 0;&nbsp; padding: 0 20px 0 20px;&nbsp; text-align: center;&nbsp; background: white;}.scrollingtable {&nbsp; box-sizing: border-box;&nbsp; display: inline-block;&nbsp; vertical-align: middle;&nbsp; overflow: hidden;&nbsp; width: auto; /*if you want a fixed width, set it here, else set to auto*/&nbsp; min-width: 0/*100%*/; /*if you want a % width, set it here, else set to 0*/&nbsp; height: 188px/*100%*/; /*set table height here; can be fixed value or %*/&nbsp; min-height: 0/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/&nbsp; font-family: Verdana, Tahoma, sans-serif;&nbsp; font-size: 15px;&nbsp; line-height: 20px;&nbsp; padding: 20px 0 20px 0; /*need enough padding to make room for caption*/&nbsp; text-align: left;}.scrollingtable * {box-sizing: border-box;}.scrollingtable > div {&nbsp; position: relative;&nbsp; border-top: 1px solid black;&nbsp; height: 100%;&nbsp; padding-top: 20px; /*this determines column header height*/}.scrollingtable > div:before {&nbsp; top: 0;&nbsp; background: cornflowerblue; /*header row background color*/}.scrollingtable > div:before,.scrollingtable > div > div:after {&nbsp; content: "";&nbsp; position: absolute;&nbsp; z-index: -1;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; left: 0;}.scrollingtable > div > div {&nbsp; min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/&nbsp; max-height: 100%;&nbsp; overflow: scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/&nbsp; overflow-x: hidden;&nbsp; border: 1px solid black; /*border around table body*/}.scrollingtable > div > div:after {background: white;} /*match page background color*/.scrollingtable > div > div > table {&nbsp; width: 100%;&nbsp; border-spacing: 0;&nbsp; margin-top: -20px; /*inverse of column header height*/&nbsp; /*margin-right: 17px;*/ /*uncomment if using % width*/}.scrollingtable > div > div > table > caption {&nbsp; position: absolute;&nbsp; top: -20px; /*inverse of caption height*/&nbsp; margin-top: -1px; /*inverse of border-width*/&nbsp; width: 100%;&nbsp; font-weight: bold;&nbsp; text-align: center;}.scrollingtable > div > div > table > * > tr > * {padding: 0;}.scrollingtable > div > div > table > thead {&nbsp; vertical-align: bottom;&nbsp; white-space: nowrap;&nbsp; text-align: center;}.scrollingtable > div > div > table > thead > tr > * > div {&nbsp; display: inline-block;&nbsp; padding: 0 6px 0 6px; /*header cell padding*/}.scrollingtable > div > div > table > thead > tr > :first-child:before {&nbsp; content: "";&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; height: 20px; /*match column header height*/&nbsp; border-left: 1px solid black; /*leftmost header border*/}.scrollingtable > div > div > table > thead > tr > * > div[label]:before,.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,.scrollingtable > div > div > table > thead > tr > * + :before {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; white-space: pre-wrap;&nbsp; color: white; /*header row font color*/}.scrollingtable > div > div > table > thead > tr > * > div[label]:before,.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}.scrollingtable > div > div > table > thead > tr > * + :before {&nbsp; content: "";&nbsp; display: block;&nbsp; min-height: 20px; /*match column header height*/&nbsp; padding-top: 1px;&nbsp; border-left: 1px solid black; /*borders between header cells*/}.scrollingtable .scrollbarhead {float: right;}.scrollingtable .scrollbarhead:before {&nbsp; position: absolute;&nbsp; width: 100px;&nbsp; top: -1px; /*inverse border-width*/&nbsp; background: white; /*match page background color*/}.scrollingtable > div > div > table > tbody > tr:after {&nbsp; content: "";&nbsp; display: table-cell;&nbsp; position: relative;&nbsp; padding: 0;&nbsp; border-top: 1px solid black;&nbsp; top: -1px; /*inverse of border width*/}.scrollingtable > div > div > table > tbody {vertical-align: top;}.scrollingtable > div > div > table > tbody > tr {background: white;}.scrollingtable > div > div > table > tbody > tr > * {&nbsp; border-bottom: 1px solid black;&nbsp; padding: 0 6px 0 6px;&nbsp; height: 20px; /*match column header height*/}.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/<div class="scrollingtable">&nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; <caption>Top Caption</caption>&nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th><div label="Column 1"></div></th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th><div label="Column 2"></div></th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th><div label="Column 3"></div></th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--more versatile way of doing column label; requires 2 identical copies of label-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><div>Column 4</div><div>Column 4</div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th class="scrollbarhead"/> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>&nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; </div>&nbsp; &nbsp; Faux bottom caption&nbsp; </div></div><!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->