IE11中的HandsonTable不会呈现与标题列对齐的数据列 [英] HandsonTable in IE11 Does Not Render Data Columns Lined Up with Header Columns

问题描述

我使用Chrome中的Handsontable开发了我的网络应用.很好玩，效果很好.

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

但是现在我正在尝试使其在IE11中工作，并且它存在重大的渲染问题.

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

但是它们仍然不能正确排列，不得不在handsontable类上执行!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.

是否有办法使它在IE11中正确显示?

其他信息:

创建此可动手实例时，我设置了以下选项:

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

更新:

错误的根源似乎是将div设置为wtHolder的类.问题不是wtHolder.该div具有style="width: 41.66%".

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%".

如果我删除了该width，则网格将正确显示.不知道如何在代码中删除它(因为它是由handsontable设置的.)

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

推荐答案

此样式似乎可以解决此问题:

This style seems to fix this issue:

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

这篇关于IE11中的HandsonTable不会呈现与标题列对齐的数据列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！