diff --git a/packages/design/src/table/demo/bordered.tsx b/packages/design/src/table/demo/bordered.tsx
index 273747904..3f5878a72 100644
--- a/packages/design/src/table/demo/bordered.tsx
+++ b/packages/design/src/table/demo/bordered.tsx
@@ -48,14 +48,6 @@ const data: DataType[] = [
},
];
-const App: React.FC = () => (
-
'Header'}
- footer={() => 'Footer'}
- />
-);
+const App: React.FC = () => ;
export default App;
diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts
index f09d21dd4..9f8408b49 100644
--- a/packages/design/src/table/style/index.ts
+++ b/packages/design/src/table/style/index.ts
@@ -28,6 +28,7 @@ export const genTableStyle: GenerateStyle = (token: TableToken): CSS
borderRadius: borderRadiusLG,
[`${componentCls}-footer`]: {
borderBottom: `1px solid ${colorBorderSecondary}`,
+ borderRadius: 0,
},
// 单元格通用样式
[`${componentCls}-thead, ${componentCls}-tbody`]: {
@@ -144,6 +145,31 @@ export const genTableStyle: GenerateStyle = (token: TableToken): CSS
},
},
+ // 带边框的表格样式
+ [`${componentCls}-wrapper ${componentCls}${componentCls}-bordered`]: {
+ [`${componentCls}-footer`]: {
+ borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
+ },
+ },
+
+ // 带边框但不带 footer 的表格样式
+ [`${componentCls}-wrapper:not(${componentCls}-has-footer) ${componentCls}${componentCls}-bordered`]:
+ {
+ // 表格容器设置圆角
+ [`${componentCls}-container`]: {
+ borderRadius: token.borderRadiusLG,
+ },
+ [`${componentCls}-tbody`]: {
+ // 最后一行左右单元格增加圆角
+ [`tr:last-child >*:first-child`]: {
+ borderEndStartRadius: token.borderRadiusLG,
+ },
+ [`tr:last-child >*:last-child`]: {
+ borderEndEndRadius: token.borderRadiusLG,
+ },
+ },
+ },
+
// 非可展开表格、不带 footer 表格、非空表格、不带边框表格: 底部添加分隔线
[`${componentCls}-wrapper:not(${componentCls}-expandable):not(${componentCls}-has-footer) ${componentCls}:not(${componentCls}-bordered):not(${componentCls}-empty)`]:
{