Antd - 如何为表格行制作圆角边框？
Posted
技术标签:
【中文标题】Antd - 如何为表格行制作圆角边框？【英文标题】：Antd - How to make rounded borders for Table rows? 【发布时间】：2021-02-15 19:12:48 【问题描述】：我正在为 reactjs 应用程序使用 antd 表。
我在这里创建了Sandbox 供您进行更改。 谁能帮我制作带有圆形边框的行，如下图所示？
预期：
我已尝试使用与边框相关的 css 添加 rowClassName=() => "rowClassName1"，但边框不会显示。
【问题讨论】：
【参考方案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
【讨论】：
以上是关于Antd - 如何为表格行制作圆角边框？的主要内容，如果未能解决你的问题，请参考以下文章