Table header cells do not get proper widths on IE11

[mattweason]

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?

[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.

[mattweason]

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

[timbrnbrr]

What kind of resize event did you trigger?

[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.

[praveenraji2i]

Doesn't work for me also.

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

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

[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

[hgoebl]

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

[Vin-1991]

Thanks @ctqctq man you saved my life. Cheers.