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