floatThead with Bootstrap Navs
floatThead with Bootstrap Navs need to resize the browser window to "paint" the the fixed header when switching tabs
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.8/jquery.floatThead.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
<li class="active"> <a href="#A" data-toggle="tab">A</a>
</li>
<li><a href="#B" data-toggle="tab">B</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="A">
<br>
<br>
<div class="wrapper" style="height:300px; overflow-y:auto;">
<table class="table table-bordered table-striped">
<thead class="header">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr class="FakeHeader">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
...
CSS
/*Initial table header*/
.wrapper table thead {
background-color: #eee;
}
/*Rendered Floating Table Header*/
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #eee;
}
JavaScript
var $table = $('.wrapper table');
$table.floatThead({
//useAbsolutePositioning: true,
scrollContainer: function ($table) {
return $table.closest('.wrapper');
}
});
// Issue with IE9 using the fixed header addin.
$('.FakeHeader').hide();
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$table.floatThead('reflow');
})