1
私はテーブルを作成しました。そのテーブルにスクロールして、スクロールが表示されているときに固定ヘッダーにします。固定ヘッダーとHTMLのスクロール
私もposition:fixedを使用しましたが、これは機能しません。実際、これを追加すると、すべてのヘッダーが1つの位置に表示されます。
これは私が試みたものです。このコードをしてくださいチェック：
.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>は、どのように私は、ヘッダーを修正し、スクロールを追加する必要がありますか？
この問題の解決方法はどうぞ。
オーバーフローを追加してみてください：テーブルまでスクロールします。ちょうど位置を追加するより： "th"タグにIDを与えて固定する – Bisquitue