问题描述
我正在尝试使我的应用程序与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;
}
解决方法
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;
}
}