修复了标题表多个tbody [英] Fixed header table multiple tbody
本文介绍了修复了标题表多个tbody的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望在垂直滚动时修复标题。以下是我的示例代码：
I want to fixed header when vertical scroll. This following my sample code:
<pre lang="HTML"><div>
<div style="width:300px!important;height:100px!important;overflow:auto;">
<table>
<colgroup>
<col width="2%">
<col width="6%">
<col width="8%">
<col width="10%">
<col width="4%">
<col width="7%">
<col width="12%">
<col width="12%">
<col width="9%">
<col width="12%">
<col width="">
<col width="5%">
<col width="4%">
</colgroup>
<thead>
<tr>
<th class="first-child" rowspan="2"></th>
<th>aaaaaaaaaa</th>
<th>aaaaaaaaaa</th>
<th>aaaaaaaaaaaaaa</th>
<th>aaaaaaaaaa</th>
<th>aaaaaaaaaa</th>
<th>aaaaaaaaaa</th>
<th>aaaaaaaaaaaaaa</th>
<th>aaaaaaaaaa</th>
<th>aaaaaaaaaa</th>
<th>aaaaaaaaaa</th>
<th>aaaaaaaaaaaaaa</th>
<th>aaaaaaaaaa</th>
<th class="last-child">aaaaaaaaaaaaaaaa</th>
</tr>
</thead>
<tbody >
<tr >
<td class="txt-center" rowspan="3">
1
</td>
<td rowspan="3">2</td>
<td rowspan="3">1111</td>
<td rowspan="3"><a href="#" >Sai Gon</a> </td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>22</td>
<td>2</td>
</tr><tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>22</td>
<td>2</td>
</tr><tr>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
<tbody >
<tr >
<td class="txt-center" rowspan="3">
1
</td>
<td rowspan="3">2</td>
<td rowspan="3">1111</td>
<td rowspan="3"><a href="#" >Sai Gon</a> </td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>22</td>
<td>2</td>
</tr><tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>22</td>
<td>2</td>
</tr><tr>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
<tbody >
<tr >
<td class="txt-center" rowspan="3">
1
</td>
<td rowspan="3">2</td>
<td rowspan="3">1111</td>
<td rowspan="3"><a href="#" >Sai Gon</a> </td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>22</td>
<td>2</td>
</tr><tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>22</td>
<td>2</td>
</tr><tr>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
<tbody >
<tr >
<td class="txt-center" rowspan="3">
1
</td>
<td rowspan="3">2</td>
<td rowspan="3">1111</td>
<td rowspan="3"><a href="#" >Sai Gon</a> </td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>22</td>
<td>2</td>
</tr><tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>22</td>
<td>2</td>
</tr><tr>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
</div></div>
我尝试了什么： < br $> b $ b
请告诉我解决问题的方法。谢谢
What I have tried:
Please tell me any solution for my problem . Thanks
推荐答案
在表格标题上使用position：sticky。
演示 [ ^ ]
如何创建粘性元素 [ ^ ]
我可以使用... CSS位置：粘性 [ ^ ]
如果您需要支持旧浏览器或任何版本的Internet Explorer，使用polyfill：
GitHub - wilddeer / stickyfill：Polyfill for CSS`位置：sticky` [ ^ ]
Useposition:stickyon the table header.
Demo[^]
How To Create a Sticky Element[^]
Can I use... CSS position:sticky[^]
If you need to support older browsers, or any version of Internet Explorer, use a polyfill:
GitHub - wilddeer/stickyfill: Polyfill for CSS `position: sticky`[^]
这篇关于修复了标题表多个tbody的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
