JS code with table header fixed TH width must be equal to TD width

Question

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

why are you passing 1233?

karthick
– karthick

2017-06-07 02:46:24 +00:00
Commented Jun 7, 2017 at 2:46 — karthick
– karthick, Commented Jun 7, 2017 at 2:46
position fixed stretched THEAD @karthick that's why.

Zaid Bin Khalid
– Zaid Bin Khalid

2017-06-07 03:08:42 +00:00
Commented Jun 7, 2017 at 3:08 — Zaid Bin Khalid
– Zaid Bin Khalid, Commented Jun 7, 2017 at 3:08

karthick · Accepted Answer · 2017-06-07 03:16:31Z

2

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);
});

edited Jun 7, 2017 at 3:16

answered Jun 7, 2017 at 2:50

karthick

12.2k7 gold badges61 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

karthick Over a year ago

it works fine jsfiddle.net/ccrzoL2k/1. What is the issue you are facing?

karthick Over a year ago

I have updated the code with resize functionality. Make sure you are updating the code properly. Because it works fine in the js fiddle

Zaid Bin Khalid Over a year ago

What if I have a nested table structure?

karthick Over a year ago

then you have to post your question with that structure. even if it's a nested table structure you will be using the headerFixed function right?. Then you can debug and see what is causing the issue. Most likely you may have to update the margin-left property depending on the table's position. Try to solve it. If not post that as a question

Zaid Bin Khalid Over a year ago

Thanks, @karthick for your kind help.

Collectives™ on Stack Overflow

JS code with table header fixed TH width must be equal to TD width

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related