Sticky headers are not calculating the column widths properly.

With the (D7) patch the sticky header reaches now the full width of my tables, this is really better.
The columns are well sized on Firefox, but alas not on IE, Safari PC, Chrome.

As you can see on the joined screenshots, though the patch improves the rendering, there are still problems with Chrome (or Safari PC).

These renderings are done on a test site using the default bartik theme, on which I modified the style.css :

tr td,
tr th {
  padding: 1%; /* previously: 4px 9px */

This has been done to reproduce the error I've noticed on the website I'm working on, which uses a responsive, customized, theme, where sizes are often given using percents.

In conclusion, the (D7) patch works perfectly for Firefox and corrects huge sizing errors.
For IE, it's almost perfect (on the site I'm working on there are still little shifts of 1 or 2 pixels, but the total width is ok ; it may be due to the combination of other CSS instructions).
The worst is for Chrome or Safari (total width is also good).

Sorry, it doesn't change anything.

The patch in #2097081-6: Sticky headers are not calculating the column widths properly. works for us on a 7.24 site using a Zen sub-theme - still need to do full cross browser testing though.

We have a custom theme built off of omega 4.x.
Applying this patch resolved column spacing issues in the following browsers on mac osx 10.9.3:

• Firefox (originally was miscalculating very badly causing the sticky header to be approx 75% of the table)
• Chrome (minor column width issues)
• Safari (same as Chrome)

Thanks for this, resolved our issues as well.

Patch #6 solved issue on Drupal 7.34.
Works fine.

Looks like a testbot fluke.

Patch #6 solved issue on Drupal 7.34.
Works fine. Thanks @travist

Testbot fluke.

I hope it passes test soon because each time I update Drupal I have to apply it on each site...

I took a closer look at this and essentially the same code appears to be in Drupal 8 - so wouldn't the bug exist there too?

D8 using jQuery 2.x which is take care of box-sizing.

Confirming #6 worked in 7.38, temporarily overwriting the file in theme until the problem is fixed in core.

Confirmed #6 worked for me too! Thanks @travist!

Drupal 8 doesn't have this problem in my testing (it looks like the width calculation issue was fixed in jQuery 1.8) so I'm setting this back to 7.x-dev

I think there may be some confusion over whether or not travist's patch works depending on how the theme is setting the box-sizing CSS property. I noticed while using the Shiny theme from Drupal Commerce Kickstart 2 that it didn't matter what version of jQuery or which of the above patches etc. were attempted--all proposed solutions had a misaligned sticky table header on my Permissions admin page.

I noticed that Shiny set the table.sticky-header th CSS for box-sizing to "initial". Adding a custom module allows you to introduce CSS that works across themes. Adding the following CSS with a custom module fixed the misaligned sticky headers for me in conjunction with patch #6 above (although it may have fixed it without the patch but I didn't check). I'm assuming this is because the calculations (even $that.outerWidth()) were being calculated wrong because the basis of the calculation was incorrect with the different box-sizing setting.

table.sticky-header th
{
  box-sizing:  border-box !important;
}

Unfortunately, if a theme overrides this setting I'm not sure there's a lot Core could do to foolproof it without starting to get stupidly complex or verbose.

The patch fixed my view perfectly, but the /admin/content page sticky headers became misaligned. We use the Administration Views module, and the Seven theme for administration views. I reversed the patch and then checked to see how Administration Views got the sticky headers to work. It turns out box-sizing is set to content-box on the th elements. I don't know where this got set originally. So I added the following css for my view:

table.sticky-header th
{
  box-sizing:  content-box;
}

And then my view started working. My site uses an omega theme, and box-sizing is set to border-box by default.

Thanks @travist and @DigitalFrontiersMedia.

If you are ajax replacing the table
have a look at this patch and explanation (example):
#1764912-38: Fix regressions and further improve tableheader.js

Came across this using seven as admin theme. #6 didn't work but replacing "width" with "min-width" did (plus I added "box-sizing: border-box" because it needed it and I couldn't think of a reason not to...)
See patch attached.

But there's still a problem: I use module filter to filter the list. After filtering the "normal" header widths change but the sticky ones don't. A workaround is to change the window size while sticky headers are showing. I suppose this is more a problem for module filter than sticky headers.

I verified that #32 fixes the issue. I tested the patch from #32 in Safari, IE11, Edge, Chrome, and Firefix and verified it fixes the issue.

Thanks for working on this. I tried to simulate the issue, but with no luck. On a clean D7 install using the Seven admin theme (and some random content generated by Devel module), the sticky header on the table on admin/content is aligned correctly even without the patch (tested on Firefox and Chrome).

Can we get an update, if this is still an issue? If yes, please update the issue summary with steps to reproduce the issue. Automated tests does not help us here, so we need to manually reproduce and test this. Thanks!