Angular：Ng-zorro组件Table（嵌套子表格）样式修改笔记

Ng-zorro的Table（嵌套子表格）样式修改笔记

复杂点：展开按钮样式的修改,图例如下

修改为

点击按钮由加号换为箭头，实现方式为，用icon覆盖原来的加号，但保留原有加号的点击区域，html该表格区域相关代码:

<td [(nzExpand)]="data.expand"><d *ngIf="!data.expand" class="downicon"><i nz-icon nzType="right" nzTheme="outline"></i></d><d *ngIf="data.expand" class="downicon"><i nz-icon nzType="down" nzTheme="outline"></i></d></td>

样式（/deep/是修改ng-zorro组件样式的一种方式）：

/* 主表样式，基于table样式的调整 */.parentTable /deep/ td.nz-disable-td.ant-table-cell {border-top: none !important;}/* 子表样式 */.childTable .ant-table-tbody>tr>td {color: #ffffff;background-color: #19292B ;}.childTable /deep/ .ant-table-tbody>tr.ant-table-placeholder {display: none !important;}/* childre表格位置 */.table /deep/ .ant-table-tbody>tr>td>.ant-table-wrapper:only-child .ant-table {margin: -5px -6px 0px -5px;}/* 小图标样式 */.downicon {position: absolute;top: 19%;cursor: pointer;left: 48%;}.table /deep/ .ant-table-row-expand-icon::before {top: 6px;right: 3px;left: 3px;height: 2px;}.table /deep/.ant-table-row-expand-icon::after {top: 2px;bottom: 1px;left: 6px;width: 1px;}.table /deep/ .ant-table-row-indent+.ant-table-row-expand-icon {width: 100%;margin: 0% 0 1% 8%;background-color: transparent;color: transparent;z-index: 999;}.table /deep/ .ant-table-row-expand-icon {width: 15px;height: 15px;line-height: 15px;border: 1px solid #203033;}.table /deep/ .ant-table-row-expand-icon:focus,.ant-table-row-expand-icon:hover {color: transparent;}.table /deep/ .ant-table-row-expand-icon:active {color: transparent;}