如何在 html 表格上显示滚动条 [英] How to display scroll bar onto a html table

问题描述

我正在编写一个页面，我需要一个 html 表来保持设定的大小.我需要表格顶部的标题始终保持在那里，但无论向表格添加多少行，我也需要表格主体滚动.

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

我试过这样做，但没有出现滚动条:

tbody {高度:80em；溢出:滚动；}

<tr><th class="col1">问题编号</th><th class="col2">选项类型</th><th class="col1">持续时间</th></tr><tr><td class='qid'></td><td class="选项"></td><td class="持续时间"></td></tr></tbody></table>
解决方案
类似的事情?
http://jsfiddle.net/TweNm/
这个想法是将 
 包装在一个非静态定位的 
 中，它有一个 overflow:autoCSS 属性.然后绝对定位 
 中的元素.
#table-wrapper {位置:相对；}#table-scroll {高度:150px；溢出:自动；边距顶部:20px;}#table-wrapper 表{宽度:100%；}#table-wrapper 表 * {背景:黄色；颜色:黑色;}#table-wrapper table thead th .text {位置:绝对；顶部:-20px；z-索引:2；高度:20px；宽度:35%；边框:1px 纯红色；}
<div id="table-scroll"><表格><头><tr><th><span class="text">A</span></th><th><span class="text">B</span></th><th><span class="text">C</span></th></tr></thead>
<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><!-- 等等...--><tr><td>1, 99</td><td>2, 99 </td><td>3, 99 </td></tr></tbody>

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>

解决方案

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>

这篇关于如何在 html 表格上显示滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！