Angular Material Table 和 IE11 未正确设置列答案

【问题标题】：Angular Material Table and IE11 not setting columns correctlyAngular Material Table 和 IE11 未正确设置列
【发布时间】：2020-08-18 22:58:12
【问题描述】：

我正在尝试使我的应用程序与 IE11 兼容，但在我的垫子表中，列都被压扁了，如附图所示。这是我设置其外观的 scss 代码：我怎样才能使它与 IE11 一起工作？谢谢！

table{
    width: 100%;  
    border-radius: 3px 3px 0px 0px;
    box-shadow: 0px 1px 3px #00000029;
    table-layout: fixed;
    
}
 //First column and header
.mat-header-cell:first-child,.mat-cell:first-child{
  flex:5%;
  z-index: 1;
}
//Second column and header
.mat-header-cell:nth-child(2),.mat-cell:nth-child(2){
  flex:45%;
  z-index: 1;
}
.mat-header-cell:nth-child(3),.mat-cell:nth-child(3){
  flex:5%;
  z-index: 1;
}
.mat-header-cell:nth-child(3){
  margin-left: 3px;
}

//Last column and header
.mat-header-cell:last-child,.mat-cell:last-child{
  flex:5%;
  z-index: 1;
}
#headerRow{
  background-color:#6E6E6E ;
  border-radius: 3px 3px 0px 0px;
  height: 37px;
  
}
td.mat-cell{
  border-bottom-style: none;
  border-radius: 3px 3px 0px 0px;
  z-index: 3;
}

th.mat-header-cell{
    border-bottom-style: none;
    font: Bold 16px/16px "adobe-clean", sans-serif;
    color: #FFFFFF;
    
}

【问题讨论】：

我建议也尝试提供Mat table设计代码。只有 SCSS 代码无助于查找问题的原因。如果您提供示例设计代码，我们可以尝试对其进行测试，并尝试找出问题的原因，我们可以尝试提供建议。

标签： angular internet-explorer angular-material internet-explorer-11

【解决方案1】：

IE 不喜欢使用“table-cell”属性进行显示。这就是我修复它的方法。

mat-table {
  display: table;
  min-width: 94vw;
  min-height: 100vh;
  mat-header-cell,
  mat-cell {
    word-wrap: break-word !important;
    white-space: unset !important;
    overflow-wrap: break-word;
    width: max-content;
    padding: 2px;
    text-align: center;
    margin: 2px;
    //display: table-cell;
    min-height: 0;
  }
}

【讨论】：