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)`]: {