当前位置: 首页 > 工具软件 > NG-ZORRO > 使用案例 >

Ng-zorro组件Table样式修改笔记

法风畔
2023-12-01

Ng-zorro组件Table样式修改笔记

由于 Ng-zorro组件样式修改复杂,为了以后高效开发,记录一下,相关代码如下

/* 表头样式 */
.table /deep/ .ant-table-thead>tr>th {
  text-align: center;
  background: #30494d;
  color: #ffffff;
  padding: 0.8%;
  border-bottom: none;
  font-size: 1em;
}
/* 表格主体样式 */
.table /deep/ .ant-table-tbody>tr>td {
  background: #203033;
  color: #ffffff;
  padding: 0.5%;
  font-size: 0.8em;
  text-align: center;
}
/* 表格下边框 */
.table /deep/ .ant-table tfoot>tr>td,
.ant-table tfoot>tr>th,
.ant-table-tbody>tr>td,
.ant-table-thead>tr>th {
  border-bottom: 1px solid #495052;
}
/* 无数字时的字体颜色 */
.table /deep/ .ant-empty-normal {
  color: #ffffff;
}

/* 无数据时下划线消失 */
.table /deep/ .ant-table-tbody>tr>td {
  border: none;
}

 类似资料: