HandsonTable in IE11 Does Not Render Data Columns

Question

I developed my web app using Handsontable in Chrome. It was fun and worked well.

But now I am trying to get it to work in IE11 and it has significant rendering issues.

The first, and the subject of this question is that the actual width of the grid does not match up with the headers. Here is an image:

I can get it close to working by adding this style to my app:

.wtHolder {
    width: 100% !important;
}

But they still don't line up correctly and it seems a bit of a hack to have to do an !important on an handsontable class.

Is there a way to get this to look right in IE11?

Additional Info:

When I create this handsontable instance, I am setting the following options:

createOptions(): ht.Options {
    let options: ht.Options = {};

    options.data = this.tableData;
    options.colHeaders = true;
    options.colHeaders = this.columnHeaders;
    options.colWidths = this.columnWidths;
    options.stretchH = 'all';
    options.columns = this.columnMappings;
    options.minSpareRows = this.minSpareRows;
    options.readOnly = this.isReadOnly;

    return options;
}

Update:

The source of the error seems to be the div with the class set to wtHolder. It is not wtHolder that is the problem. That div has style="width: 41.66%".

If I remove that width, then the grid shows correctly. Not sure how to remove it in code (since this is set by handsontable).

Answer 1

This style seems to fix this issue:

/*IE11 does not display widths correctly.  This fixes that error.*/
.wtHolder {
    width: auto !important;
}