原效果:
修改背景色和字体,包括表头和表体,要分开设置:
: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);//去掉表格背景
}
效果如图:
改变行高,并让文字居中:
:deep .ant-table-cell {
text-align: center;
padding: 5px 0;//单元格内边距
}
效果如图:
改变鼠标悬停行背景:
:deep .ant-table-tbody {
tr {
&:hover {
td {
background: rgba(255, 255, 255, 0.2);//鼠标悬停行背景
}
}
}
}
效果如图:
去掉单元格边框:
:deep .ant-table-tbody>tr>td {
border-bottom: none;//去掉单元格边框
}
效果如图: