antd table 去掉圆角

修改 Ant Design Table 组件样式的解决方案
要移除 Ant Design (antd) 中 Table 组件的圆角边框，可以通过覆盖默认样式来实现。以下是具体方法：
方法一：通过自定义 CSS 覆盖默认样式
可以针对 antd 提供的类名 .ant-table 进行样式调整。以下是一个完整的代码示例[^1]：
/* 移除表格外边框的圆角 */
.ant-table {
border-radius: 0 !important;
}

/* 如果需要进一步确保内部组件也无圆角，可扩展至其他相关类名 */
.ant-table-body,
.ant-table-header,
.ant-table-footer {
border-radius: 0 !important;
}
登录后复制
上述代码的作用是将所有的 border-radius 属性设置为 0，从而完全移除圆角效果。

方法二：在项目中正确引入并应用样式
为了确保自定义样式生效，需将其放置于合适的路径下，并正确加载到项目中。如果未按照特定方式引入，则可能导致样式被覆盖或不生效。例如，在 React 项目中应遵循以下操作流程[^2]：

将自定义 CSS 文件复制到项目的根目录（而非嵌套文件夹），以便优先级更高。
在入口 HTML 页面 (index.html) 中通过 <link> 标签引入该样式文件。

此外，也可以直接在全局样式文件（如 App.css 或 index.css）中写入以上代码片段。

方法三：局部作用域下的样式隔离
为了避免影响整个项目的全局样式，建议使用额外的容器包裹 Table 组件，并为其指定唯一的类名。这样能够限定样式的影响范围[^3]。例如：
<div className="custom-table">
<Table dataSource={data} columns={columns} />
</div>
登录后复制
对应的 CSS 如下：
.custom-table .ant-table {
border-radius: 0 !important;
}

.custom-table .ant-table-body,
.custom-table .ant-table-header,
.custom-table .ant-table-footer {
border-radius: 0 !important;
}
登录后复制
这种方法不仅实现了目标功能，还有效防止了对其他模块样式的干扰。

总结
无论是采用全局还是局部的方式，核心思路都是通过覆盖 antd 默认的 border-radius 值来达到目的。需要注意的是，当存在多个样式冲突时，可能需要借助 !important 来提升优先级。