1

first time questioner.....

I have a task of sticking a table header when the table hits the top of the browser. I decided to clone the original table header and place it within a new div which only gets shown when the document scrolls to a certain position, I then push the generated column widths of the original table into an array which then sets the width of each th in the new header.

Now it's worth pointing out at this point that there are multiple tables on multiple pages this needs to happen to, they are all generated by .NET and vary in the number of columns they can have.

This method works perfectly for certain browsers like Chrome, however when I view this method on IE the new header is misaligned by a tiny amount, if I inspect the generated html in IE, I can see the original td would generate at something like 53.55px wide and the new th would be 52.95px for example.

Below is the script, any help would be great!

var headerWidths = [], i = 0;
$("#ProductTable0 > tbody > tr:first-child > td").each(function () {
    thisWidth = $(this).width().toFixed(2);
    headerWidths.push(thisWidth);
});
$(".duped-table th").each(function () {
    $(this).width(headerWidths[i]);
    i += 1;
});
Ben
  • 11
  • 1
  • Checkout the following SO answer using css https://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on – karen Jan 15 '18 at 17:11
  • It may be helpful to include your HTML and CSS to create a [working example](https://stackoverflow.com/help/mcve) and help demonstrate the issue. – showdev Jan 15 '18 at 17:11
  • Working example can be found here: https://www.priorydirect.co.uk/cardboard-boxes/ – Ben Jan 15 '18 at 17:28

0 Answers0