Antd - 如何为表格行制作圆角边框？答案

【问题标题】：Antd - How to make rounded borders for Table rows?Antd - 如何为表格行制作圆角边框？
【发布时间】：2021-02-15 19:12:48
【问题描述】：

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

我在这里创建了Sandbox 供您进行更改。谁能帮我制作带有圆形边框的行，如下图所示？

预期：

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

【问题讨论】：

标签： reactjs antd ant-design-pro

【解决方案1】：

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

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

.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;
}

【讨论】：

【解决方案2】：

试试这个方法，

.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

【讨论】：