Как исправить заголовок таблицы начальной загрузки?
У меня есть данные внутри таблицы начальной загрузки. По мере увеличения строк заголовок будет недоступен при вертикальной прокрутке. Поэтому мне нужно исправить заголовок таблицы начальной загрузки с вертикальной прокруткой тела таблицы. Кроме того, горизонтальная прокрутка для всей таблицы, когда столбцы превышают на странице.
Реализация ссылок без начальной загрузки. Это осуществляется с помощью двух таблиц. Один для заголовка, а другой для тела.
У меня есть следующие данные, которые похожи на мои исходные данные.
ПРИМЕЧАНИЕ: я не использую col-*-* за table"s td, Потому что мои столбцы заголовков больше 12. И могут увеличиться до 15. Поэтому я не использую классы столбцов.
HTML
<tbody>
<tr>
<th style="cursor: pointer;">
ABCD
</th>
<th style="cursor: pointer;">
Asadh uysdsgh
</th>
<th style="cursor: pointer;">
ghdsgsh sdfsdjsd
</th>
<th style="cursor: pointer;">
sdagfh sdhfsjk
</th>
<th style="cursor: pointer;">
sdhfasgh sdjkj
</th>
<th style="display: none; cursor: pointer;">
shadfj sjdskdl
</th>
<th style="cursor: pointer;">
sddgjgfhgshdf skldj
</th>
<th style="cursor: pointer;">
sdfsffsd sdfsd
</th>
<th style="cursor: pointer;">
sdfsd sdfsd
</th>
<th style="cursor: pointer;">
fhgdd sdg sfs fsfsffsd sdfffs
</th>
<th style="cursor: pointer;">
fsdfsd dvf ffff
</th>
<th style="cursor: pointer;">
fsdfsd dvf ffff
</th>
<th style="cursor: pointer;">
sfgasad sdfjhjshj
</th>
<th style="cursor: pointer;"></th>
</tr>
<tr>
<td>
579852
</td>
<td>
21June_The hhjhj bhjhhkj
</td>
<td>
US jhgg
</td>
<td>
sdafss
</td>
<td>
sdfsdfssd
</td>
<td style="display: none;">
No
</td>
<td>
sfdf ,sdffssd,sdfhshdj,
</td>
<td>
Acsadfds
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sfasd
</td>
<td>
06/30/2016
</td>
<td>
sdasd
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579850
</td>
<td>
sdfff sdfabsd sjd </td>
<td>
US asdfd
</td>
<td>
sdfsdsdsd
</td>
<td>
sdfsfdfas
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf,
</td>
<td>
sdfsdsda
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
07/04/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579893
</td>
<td>
sdhafasdjfj sdhfasdsf sdfha sdfsfh
</td>
<td>
US sdfsdfgl
</td>
<td>
dfsjsdsd
</td>
<td>
sdfdfjk
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
sdfgagf
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/28/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
545554
</td>
<td>
jhsdfg sdfhh sdafjh
</td>
<td>
US sdfhhdf
</td>
<td>
sdfadilgf
</td>
<td>
tadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
08/08/2003
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579892
</td>
<td>
sadfs asdfhds dbsh dfsdh
</td>
<td>
US tadil
</td>
<td>
sddftadil
</td>
<td>
fftadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
Active
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
tadil fsddf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579855
</td>
<td>
jsdhfsdfb dfs bsdhfdjs bsdhbh
</td>
<td>
US tadil
</td>
<td>
sdftadil
</td>
<td>
fjtadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
</td>
<td>
06/21/2016
</td>
<td>
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579851
</td>
<td>
asdhshj- jd dsjsh jjsd
</td>
<td>
US tadil
</td>
<td>
tadil
</td>
<td>
Retail
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579842
</td>
<td>
Test sdhfhad bsdbh
</td>
<td>
US English
</td>
<td>
Internal
</td>
<td>
tadil
</td>
<td style="display: none;">
No
</td>
<td>
sdfffa ,dsjfjs,
</td>
<td>
Active
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdafsfsd
</td>
<td>
07/01/2016
</td>
<td>
asdff
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
</tbody>
</table>
</div>
Поиграйте по предоставленной ссылке оригинального вопроса.
Достаточно взглянуть на приведенную выше скрипку: когда заголовков больше, таблица искажается.