我试图在表格的每一行下绘制阴影。在chrome中,mozilla一切正常,但在Internet Explorer 11中却无法正常工作。
我注意到在Internet Explorer中,该行的颜色是thead的颜色,并且有一个较大的容器遮盖了我的阴影。 Internet Explorer Chrome, mozilla
我尝试使用伪元素::after
,但是当我使用伪元素absolute
时,我无法单击行,选择文本等。
如果将位置更改为.table {
width: 100%;
border-collapse: separate;
border-spacing: 0 3px;
padding: 0 2px;
&-row {
position: relative;
transition: all 0.2s ease;
border: 1px solid $c-white;
border-radius: 3px;
background-color: $c-white;
box-shadow: 0 1px 7px 10px rgba(0, 0, 0, 0.12);
}
}
,我也注意到行的宽度较小,但框阴影效果很好。
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef class="table-header-cell">
<mat-checkbox
[hidden]="hideSelectAllCheckbox"
color="primary"
(change)="$event ? toggleSelectAll() : null; onSelectionChange()"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row" class="table-cell button">
<mat-checkbox
color="primary"
[disabled]="dataSource[getRowIndex(row)].options.disabled"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null; onSelectionChange()"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
::after
有什么解决方法可以使 "editor.formatOnSave": true,
// // Configure file associations to languages (e.g. "*.extension":
"html"). These have precedence over the default associations of the
languages installed.
"files.associations": {
"*.ejs": "html, ejs, javascript"
},
"editor.tabCompletion": "on",
"[javascript]": {},
"[ejs]": {}
}
可点击或使行下的div透明吗?