Table header cells do not get proper widths on IE11

[daniel-nagy]

Table header cells do not get proper widths on IE11

[mattweason]

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

[ctqctq]

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

[mattweason]

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.

[ctqctq]

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

[timbrnbrr]

Doesn't work for me.

[ctqctq]

try this too

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

[apalayret]

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.

[timbrnbrr]

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

[timbrnbrr]

What kind of resize event did you trigger?

[praveenraji2i]

Doesn't work for me also.

[praveenraji2i]

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

[hgoebl]

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

[hgoebl]

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

[Vin-1991]

Thanks @ctqctq man you saved my life. Cheers.