Ant Design Vue修改表格样式

本文主要是介绍Ant Design Vue修改表格样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原效果：

修改背景色和字体，包括表头和表体，要分开设置：

  :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;//去掉单元格边框}

效果如图：

这篇关于Ant Design Vue修改表格样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---