Zaid Bin Khalid
Reputation: 763
JS code with table header fixed TH width must be equal to TD width
Header fixed on scroll works fine. But what I want,
Header TH should be equal to Body TD.
you can see both have different widths right now. If the question is unclear please let me know. I don't want to use any other JS LIB or plugin.
(function ($) {
$.fn.headerFixed = function (topOffSetVal,fTableID,topPosition) {
var tableWidth = $('#'+fTableID).width();
$(window).scroll(function(){
if($(this).scrollTop() > topOffSetVal){
$("#"+fTableID+' > thead').css({'position':'fixed','top':topPosition+'px','margin-left':'0px','width':tableWidth+'px'});
}else{
$("#"+fTableID+' > thead').removeAttr('style')
}
});
$( window ).resize(function() {
tableWidth = $('#'+fTableID).width();
$("#"+fTableID+' > thead').css({'position':'fixed','top':topPosition+'px','margin-left':'0px','width':tableWidth+'px'});
});
};
})(jQuery);
$(document).ready(function(){
$('#myID').headerFixed(400,'myID',0);
});.table tr, .table td{
border:0.1px solid #ddd;
}
.table thead{
background:#C00; color:#FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="1235" border="0" align="center" class="table" id="myID" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th width="45">Sr#</th>
<th align="center">MAP</th>
<th width="112">YARD ID</th>
<th width="85">NAME</th>
<th width="107">REGION</th>
<th width="150">YARD PORT</th>
<th width="124">ADDRESS</th>
<th width="168">ACCESS INFO</th>
<th width="130">CAPACITY</th>
<th width="104">TIMING</th>
<th width="125">Web</th>
<th align="center" width="128">Auction</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Sr#</th>
<th>MAP</th>
<th>YARD ID</th>
<th>NAME</th>
<th>REGION</th>
<th>YARD PORT</th>
<th>ADDRESS</th>
<th>ACCESS INFO</th>
<th>CAPACITY</th>
<th>TIMING</th>
<th>Show on Web</th>
<th>Auction</th>
</tr>
</tfoot>
</table>Thanks regards Zaid Bin Khalid
Upvotes: 1
Views: 89
Answers (1)
karthick
Reputation: 12176
You are passing a fixed width of 1233px that's the reason the header.th != body.td
Update your jquery function code with this
(function ($) {
$.fn.headerFixed = function (topOffSetVal,fTableID,topPosition) {
var tableWidth = $('#'+fTableID).width();
$(window).scroll(function(){
if($(this).scrollTop() > topOffSetVal){
$("#"+fTableID+' > thead').css({'position':'fixed','top':topPosition+'px','margin-left':'0px','width':tableWidth+'px'});
}else{
$("#"+fTableID+' > thead').removeAttr('style')
}
});
$( window ).resize(function() {
tableWidth = $('#'+fTableID).width();
$("#"+fTableID+' > thead').css({'position':'fixed','top':topPosition+'px','margin-left':'0px','width':tableWidth+'px'});
});
};
})(jQuery);
$(document).ready(function(){
$('#myID').headerFixed(400,'myID',0);
});
Upvotes: 2
Related Questions
- How to set width of table td width
- Setting width of HTML table header elements via JavaScript not updating
- How to set HTML table cell width using JavaScript and jQuery
- CSS fixed header for table without specify width
- HTML table fixed header with max column widths and padding using jQuery
- HTML Table Fixed Header with Responsive Table Width
- Table header columns not maintaining width using fixed header
- Style Dynamic Table , TD fixed width
- Control table width with Jquery issue
- how to fix the width of a td or table so that it does not stretches