By generalizing the code in this SO answer, I've created a small jQuery plug-in which makes it easy to set up a scrolling header on any table - that is, when you scroll down such that the table header would normally be outside of the viewable window, a clone of the header bees fixed to the top of the window so that you can see which columns are which. That's all working fine, but the problem I'm having is that I can't get the column widths to match up perfectly between the clone table and the original table.

I've created a jsFiddle which demonstrates the problem here. The gist of it is that I'm using the following loop to copy cell widths from the parent table to the clone table:

$("#tbl1").find('tr').first().children().each(function(i, e)
{
    $($("#tbl1_clone").find('tr').children()[i]).width($(e).width());
});

This is necessary because the clone table only consists of the parent table's header; it has none of the content, therefore its column widths would be different than the parent table's without this step. However, this loop doesn't quite work properly. The cell widths in the cloned table are always off by a few pixels. This happens in both IE8 and Chrome (and presumably others, though I haven't tested them.)

I'm at a plete loss as to how to correct this problem. Please check out the jsFiddle, as it explains the problem much better than I have.

It's perhaps worth noting that the same code seems to work when the clone table's position is not fixed. However, that's of no use to me, since I need it to be fixed.

By generalizing the code in this SO answer, I've created a small jQuery plug-in which makes it easy to set up a scrolling header on any table - that is, when you scroll down such that the table header would normally be outside of the viewable window, a clone of the header bees fixed to the top of the window so that you can see which columns are which. That's all working fine, but the problem I'm having is that I can't get the column widths to match up perfectly between the clone table and the original table.

I've created a jsFiddle which demonstrates the problem here. The gist of it is that I'm using the following loop to copy cell widths from the parent table to the clone table:

$("#tbl1").find('tr').first().children().each(function(i, e)
{
    $($("#tbl1_clone").find('tr').children()[i]).width($(e).width());
});

This is necessary because the clone table only consists of the parent table's header; it has none of the content, therefore its column widths would be different than the parent table's without this step. However, this loop doesn't quite work properly. The cell widths in the cloned table are always off by a few pixels. This happens in both IE8 and Chrome (and presumably others, though I haven't tested them.)

I'm at a plete loss as to how to correct this problem. Please check out the jsFiddle, as it explains the problem much better than I have.

It's perhaps worth noting that the same code seems to work when the clone table's position is not fixed. However, that's of no use to me, since I need it to be fixed.

• javascript
• jquery
• css
• html-table

Share Improve this question Follow edited Sep 17, 2018 at 20:54 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 25, 2011 at 20:38 Mitch LindgrenMitch Lindgren 2,17011 gold badge1919 silver badges3939 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2 +50

For some reason, the width attribute on your cloned table is throwing off the calculations. I'm not exactly sure why but if you use:

$("#tbl1_clone").removeAttr('style');

at the end of your jquery code like, here, it seems to work.

I know this question is really old... but I stumbled upon it with a similar issue, figured I'd add an answer just for reference.

It took me about a week to realize that switching from getting the Element.offsetWidth() to getting the Element.getBoundingClientRect().width fixed my problem pletely.

I'm not sure about jQuery... but I'm using plain JS to do the same thing here (clone my table header and copy the widths over) and I was having weird width issues that weren't making any sense... this fixed it pletely.

Apparently Element.getBoundingClientRect().width will get the width to the neariest fraction, while Element.offsetWidth() will round it off to the nearest whole number.

You can view this answer for more information (they'll explain it better than I can right now): How do I retrieve an HTML element's actual width and height?

Try using offsetWidth, something like...

    // make each cell width in the header table, the same width as
    // the cells in the orginal table (header table has one row)  
    $headerTable.find('td, th').each(function(index)
    {
        var width = originalTable.rows[0].cells[index].offsetWidth
        this.width = width;
    });