如何在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>
这个想法是将< 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?
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屋!