Antd

Question

我正在为 reactjs 应用程序使用 antd table。

我在这里创建了 Sandbox 供您进行更改。谁能帮我制作像下图这样的圆形边框的行？

预计：

我尝试添加 rowClassName={() => "rowClassName1"} 与边框相关 css 但边框不会显示。

Answer 1

试试这个方法，

.rowClassName1 td:first-child {
 border-top-left-radius: 10px;
 border-bottom-left-radius: 10px;
}

.rowClassName1 td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
 }

工作演示：- https://codesandbox.io/s/antd-table-rounded-border-row-forked-9u4x9?file=/src/App.js

Answer 2

@UKS 的回答为我解决了这个问题，并且能够制作带有圆角边框的行。

如果有人想更改 header 样式以及行。

.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:first-child{
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}

.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:last-child{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

Antd - 如何为 Table 行制作圆角边框？

Antd - How to make rounded borders for Table rows?

reactjs

ant-design-pro