Фиксированный заголовок таблицы нескольких элемента tbody
Я хочу, чтобы фиксированный заголовок при вертикальной прокрутке. Это следующий мой пример кода:
<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>
Что я уже пробовал:
Пожалуйста, скажите мне любое решение моей проблемы . Спасибо