I've data inside a bootstrap table. As the rows increases, the header will be out of sight on vertical scroll. So I need to fix the header of the bootstrap table with table body vertical scrollable. Also,the horizontal scroll for the whole table when columns exceed in the page.
Reference implementation without bootstrap.This is implemented by using two tables. One for header and the other for body.
I've the following data which is similar to my original data.
NOTE:I am not using any col-*-* for table's td. Because my header columns are more than 12. And may increase up to 15. So I don't use the column classes.
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 by using the provided link of the original question.
Just look at the above fiddle, when there are more headers,table gets distorted.
