1
我创建了一个表,并在该表中我也希望滚动并希望显示滚动时修复标题。我也使用position:fixed
但这不起作用。实际上,当我添加这个时,所有的头文件都在一个位置上。固定标题和滚动HTML
这是我试过的。检查此代码,请:
.GridviewScrollHeader TH, .GridviewScrollHeader TD
{
padding: 5px;
font-weight: bold;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #EFEFEF;
text-align: left;
vertical-align: bottom;
}
.GridviewScrollItem TD
{
padding: 5px;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #FFFFFF;
}
.GridviewScrollPager
{
border-top: 1px solid #AAAAAA;
background-color: #FFFFFF;
}
.GridviewScrollPager TD
{
padding-top: 3px;
font-size: 14px;
padding-left: 5px;
padding-right: 5px;
}
.GridviewScrollPager A
{
color: #666666;
}
.GridviewScrollPager SPAN
{
font-size: 16px;
font-weight: bold;
}
.inner_table {
width: 100%;
border-collapse: collapse;
overflow: auto;
height: 300px;
}
#pagination a {
display:inline-block;
margin-right:5px;
}
<table ID="tabledata" class="inner_table GridviewScrollPager">
<thead>
<tr class="GridviewScrollHeader GridviewScrollItem">
<th>
Name
</th>
<th>
Class
</th>
</tr>
</thead>
<tbody>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td >
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
Roh
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
ABC
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
DEF
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
EFG
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
</tbody>
</table>
所以我应该怎么解决这个标题,并添加滚动?
请为此问题提供任何解决方案。
尝试添加溢出:滚动表。不仅仅是添加位置:通过给它的id来固定到“th”标签 – Bisquitue