我在引导程序表中的数据。随着行的增加，标题在垂直滚动时将不可见。所以我需要修复引导表的标题，表体垂直可滚动。此外，当页面中的列超出时，整个表格的水平滚动。
Reference implementation without bootstrap。这是通过使用两个表来实现的。一个用于头部，另一个用于身体。
我提供的以下数据与我的原始数据相似。
注意：我没有对col-*-* table使用任何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>
Fiddle 使用原始问题的提供链接。
只要看看上面的小提琴，当有更多标题时，表就会失真。