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

问题描述

我正在写一个页面，我需要一个html表来保持一个集合的大小。我需要在表的顶部的头始终保持在那里，但我还需要表的主体滚动，无论多少行添加到表。

我想让它看起来像这个网址中的方法2： http://www.cssplay.co.uk/menu/tablescroll.html

我尝试过这样做但不显示滚动条：

 < table border = 1 id =qandatblalign =center> 
< tr> 
< th class =col1>问题No< / th> 
< th class =col2>选项类型< / th> 
< th class =col1>持续时间< / th> 
< / tr> 
 
< tbody> 
< tr> 
< td class ='qid'>< / td> 
< td class =options>< / td> 
< td class =duration>< / td> 
< / tr> 
< / tbody> 
< / table> 
  

CSS：

 code> tbody {
 height：80em; 
 overflow：scroll; 
} 
  

解决方案

p>

http://jsfiddle.net/TweNm/

这个想法是将< table> 包裹在非静态定位的< div> code>其中有一个 overflow：auto CSS属性。然后将元素置于< thead> 中。

HTML

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

CSS

 ＃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; 
} 
  

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:

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

解决方案

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.

HTML

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

CSS

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

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