原效果:
修改背景色和字体,包括表头和表体,要分开设置:
javascript"> :deep .ant-table-thead>tr>th {background: rgba(255, 255, 255, 0);//去掉表头背景color: rgb(100, 181, 220);font-weight: bold;border: none;//去掉表头边框}:deep .ant-table {color: aliceblue;font-size: 12px;background: rgba(255, 255, 255, 0);//去掉表格背景}
效果如图:
改变行高,并让文字居中:
javascript"> :deep .ant-table-cell {text-align: center;padding: 5px 0;//单元格内边距}
效果如图:
改变鼠标悬停行背景:
javascript"> :deep .ant-table-tbody {tr {&:hover {td {background: rgba(255, 255, 255, 0.2);//鼠标悬停行背景}}}}
效果如图:
去掉单元格边框:
javascript"> :deep .ant-table-tbody>tr>td {border-bottom: none;//去掉单元格边框}
效果如图: