Menu
I'm using jquery.floatThead for responsive table and having an issue with offset spacing with fixed header on top. The header height change when resizing or scrolling the browser. I even try the "autoReflow" and "reflow" with no luck.
Here is my code. I call the function to resize and scroll the "floathead" but it does not work. Is there something I missing?
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.floatThead-wrapper .table-responsive {
max-height: 200px;
overflow-y: auto;
}
thead {
color: #ffffff;
background: #222222;
}
header#header {
position: fixed;
background: #ffffff;
z-index: 9;
}
.h500 {
height: 500px;
}
.h200 {
height: 200px;
}
</style>
<body>
<header id="header" class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</header>
<div class="h200"></div>
<div class="table-responsive">
<table class="table table-autoheight">
<thead>
<tr>
<th>Header title 1</th>
<th>Header title 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>table content 1-1</td>
<td>table content 2-1</td>
</tr>
<tr>
<td>table content 1-2</td>
<td>table content 2-2</td>
</tr>
<tr>
<td>table content 1-3</td>
<td>table content 2-3</td>
</tr>
<tr>
<td>table content 1-4</td>
<td>table content 2-4</td>
</tr>
<tr>
<td>table content 1-1</td>
<td>table content 2-1</td>
</tr>
<tr>
<td>table content 1-2</td>
<td>table content 2-2</td>
</tr>
<tr>
<td>table content 1-3</td>
<td>table content 2-3</td>
</tr>
<tr>
<td>table content 1-4</td>
<td>table content 2-4</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-fixedheight">
<thead>
<tr>
<th>Header title 1</th>
<th>Header title 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>table content 1-1</td>
<td>table content 2-1</td>
</tr>
<tr>
<td>table content 1-2</td>
<td>table content 2-2</td>
</tr>
<tr>
<td>table content 1-3</td>
<td>table content 2-3</td>
</tr>
<tr>
<td>table content 1-4</td>
<td>table content 2-4</td>
</tr>
<tr>
<td>table content 1-1</td>
<td>table content 2-1</td>
</tr>
<tr>
<td>table content 1-2</td>
<td>table content 2-2</td>
</tr>
<tr>
<td>table content 1-3</td>
<td>table content 2-3</td>
</tr>
<tr>
<td>table content 1-4</td>
<td>table content 2-4</td>
</tr>
<tr>
<td>table content 1-1</td>
<td>table content 2-1</td>
</tr>
<tr>
<td>table content 1-2</td>
<td>table content 2-2</td>
</tr>
</tbody>
</table>
</div>
<div class="h500"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mkoryak.github.io/floatThead/dist/jquery.floatThead.min.js"></script>
<script>
function TTHeadOS() {
var tableTheadOS = $('#header').outerHeight(true);
var $table = $('.table-autoheight');
$table.floatThead({
responsiveContainer: function($table){
return $table.closest('.table-responsive');
},
top: tableTheadOS,
zIndex:2,
autoReflow: true,
});
$table.floatThead('reflow');
$table.trigger('reflow');
};
$('.table-fixedheight').floatThead({
position: 'absolute',
scrollContainer: true,
zIndex:2,
});
$(document).ready(function(){
TTHeadOS();
});
$(window).resize(function(){
TTHeadOS();
});
$(window).scroll(function(){
TTHeadOS();
});
</script>
</body>
622
asked Sep 06 '25 03:09
Based on the documentation from floatThead, I use the function instead of variable.
<script>
function TTHeadOS(){
return $("#header").height();
};
var $table = $('.table-autoheight');
$table.floatThead({
responsiveContainer: function($table){
return $table.closest('.table-responsive');
},
top: TTHeadOS,
zIndex:2,
autoReflow: true,
});
$('.table-fixedheight').floatThead({
position: 'absolute',
scrollContainer: true,
zIndex:2,
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With