fixed-table-header Table header cells do not get proper widths on IE11

I'm having a problem where the table header cells do not properly line up with the table columns exclusively in IE11, seems to work fine in Chrome. Has anyone had a similar issue?

Jul 06 '17 23:07 mattweason

I have the same problem, only on IE11. And it's a little odd, because the original thead is properly line up, but not the clone.

Sep 13 '17 12:09 apalayret

Have you found a solution for this problem yet? I have experienced the same problem using Firefox and IE11.

Sep 25 '17 12:09 timbrnbrr

What I ended up doing was just triggering a resize event after the table loaded. It's a bit hacky but it works.

Sep 25 '17 16:09 mattweason

What kind of resize event did you trigger?

Oct 05 '17 14:10 timbrnbrr

Here's the resize event code I use:

window.dispatchEvent(new Event('resize'));

For IE you might have to use this:

var evt = document.createEvent('HTMLEvents'); evt.initEvent('resize', true, false); window.dispatchEvent(evt);

I also put that in a setTimeout to make sure the table is fully loaded before it triggers. Like I said, it's hacky but it does the job for now.

Oct 05 '17 14:10 mattweason

if you have child element inside your TH, you need to set the width on the child element instead of setting the width on your TH

this is my code to fix this problem var setWidth = function () { marginTop(height()); //checking IE11 var isIE = /@cc_on!@/false || !!document.documentMode; if (isIE){ clone.children().css({ width: style.width }); } else { clone.css({ width: style.width }); } };

Oct 06 '17 23:10 ctqctq

Doesn't work for me.

Oct 10 '17 07:10 timbrnbrr

Doesn't work for me also.

Oct 11 '17 14:10 praveenraji2i

try this too

Oct 11 '17 16:10 ctqctq

@ctqctq It's working, thank you. Please add
clone.css({ width: widthToAdd + 'px', minWidth: widthToAdd + 'px',
maxWidth: style.width + 'px' });

Oct 12 '17 07:10 praveenraji2i

Thanks! You're saving my day.

My working solution looks like this (merged and corrected a bit):

          var setWidth = function () {
            marginTop(height());
            //checking IE11
            var isIE = !!document.documentMode;
            if (isIE) {
              var border = parseFloat(style.borderRightWidth) + parseFloat(style.borderLeftWidth);
              var padding = parseFloat(style.paddingRight) + parseFloat(style.paddingLeft);
              var margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
              var widthToAdd = parseFloat(style.width) + border + padding + margin;
              console.log('width: ', widthToAdd);
              clone.css({
                width: widthToAdd + 'px',
                minWidth: widthToAdd + 'px',
                maxWidth: style.width + 'px'
              });
            } else {
              clone.css({width: style.width }); //modified to set width directly instead of max and minwidth
            }
          };

Dec 08 '17 16:12 hgoebl

I've found a better way to handle IE11

                            //checking IE11
                            var isIE = /*@cc_on!@*/false || !!document.documentMode;
                            if (isIE) {
                                clone.css({
                                    boxSizing: 'content-box'
                                });
                            }
                            clone.css({
                                width: style.width,
                                minWidth: style.width,
                                maxWidth: style.width
                            });

I was reading this earlier https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Dec 08 '17 22:12 ctqctq

Thanks @ctqctq it works perfectly with IE11. Much better solution.

Dec 11 '17 06:12 hgoebl

Thanks @ctqctq man you saved my life. Cheers.

Apr 26 '20 09:04 Vin-1991