如何在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 {

  box-sizing: border-box;

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0 20px 0 20px;

  text-align: center;

  background: white;

}

.scrollingtable {

  box-sizing: border-box;

  display: inline-block;

  vertical-align: middle;

  overflow: hidden;

  width: auto; /*if you want a fixed width, set it here, else set to auto*/

  min-width: 0/*100%*/; /*if you want a % width, set it here, else set to 0*/

  height: 188px/*100%*/; /*set table height here; can be fixed value or %*/

  min-height: 0/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/

  font-family: Verdana, Tahoma, sans-serif;

  font-size: 15px;

  line-height: 20px;

  padding: 20px 0 20px 0; /*need enough padding to make room for caption*/

  text-align: left;

}

.scrollingtable * {box-sizing: border-box;}

.scrollingtable > div {

  position: relative;

  border-top: 1px solid black;

  height: 100%;

  padding-top: 20px; /*this determines column header height*/

}

.scrollingtable > div:before {

  top: 0;

  background: cornflowerblue; /*header row background color*/

}

.scrollingtable > div:before,

.scrollingtable > div > div:after {

  content: "";

  position: absolute;

  z-index: -1;

  width: 100%;

  height: 100%;

  left: 0;

}

.scrollingtable > div > div {

  min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/

  max-height: 100%;

  overflow: scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/

  overflow-x: hidden;

  border: 1px solid black; /*border around table body*/

}

.scrollingtable > div > div:after {background: white;} /*match page background color*/

.scrollingtable > div > div > table {

  width: 100%;

  border-spacing: 0;

  margin-top: -20px; /*inverse of column header height*/

  /*margin-right: 17px;*/ /*uncomment if using % width*/

}

.scrollingtable > div > div > table > caption {

  position: absolute;

  top: -20px; /*inverse of caption height*/

  margin-top: -1px; /*inverse of border-width*/

  width: 100%;

  font-weight: bold;

  text-align: center;

}

.scrollingtable > div > div > table > * > tr > * {padding: 0;}

.scrollingtable > div > div > table > thead {

  vertical-align: bottom;

  white-space: nowrap;

  text-align: center;

}

.scrollingtable > div > div > table > thead > tr > * > div {

  display: inline-block;

  padding: 0 6px 0 6px; /*header cell padding*/

}

.scrollingtable > div > div > table > thead > tr > :first-child:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  height: 20px; /*match column header height*/

  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 {

  position: absolute;

  top: 0;

  white-space: pre-wrap;

  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 {

  content: "";

  display: block;

  min-height: 20px; /*match column header height*/

  padding-top: 1px;

  border-left: 1px solid black; /*borders between header cells*/

}

.scrollingtable .scrollbarhead {float: right;}

.scrollingtable .scrollbarhead:before {

  position: absolute;

  width: 100px;

  top: -1px; /*inverse border-width*/

  background: white; /*match page background color*/

}

.scrollingtable > div > div > table > tbody > tr:after {

  content: "";

  display: table-cell;

  position: relative;

  padding: 0;

  border-top: 1px solid black;

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

  border-bottom: 1px solid black;

  padding: 0 6px 0 6px;

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

  <div>

    <div>

      <table>

        <caption>Top Caption</caption>

        <thead>

          <tr>

            <th><div label="Column 1"></div></th>

            <th><div label="Column 2"></div></th>

            <th><div label="Column 3"></div></th>

            <th>

              <!--more versatile way of doing column label; requires 2 identical copies of label-->

              <div><div>Column 4</div><div>Column 4</div></div>

            </th>

            <th class="scrollbarhead"/> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->

          </tr>

        </thead>

        <tbody>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>

        </tbody>

      </table>

    </div>

    Faux bottom caption

  </div>

</div>

<!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->