diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7e6c55a3d8ff..f7e4d854b8de 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1062,31 +1062,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
>
|
Jim Green
|
-
- 42
- |
-
- 0571-22098333
- |
-
- 18889898888
- |
-
- London No. 1 Lake Park
- |
|
0575-22098909
|
@@ -1137,6 +1117,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
>
18
+
+ 0575-22098909
+ |
@@ -1154,12 +1140,26 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
>
|
Jake White
|
+
+ 18
+ |
+
+ 18900010002
+ |
+
+ Dublin No. 2 Lake Park
+ |
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
index 8ea6de6a3e59..033cc5b546a0 100644
--- a/components/table/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -850,31 +850,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
>
Jim Green
|
-
- 42
- |
-
- 0571-22098333
- |
-
- 18889898888
- |
-
- London No. 1 Lake Park
- |
|
0575-22098909
|
@@ -925,6 +905,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
>
18
+
+ 0575-22098909
+ |
@@ -942,12 +928,26 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
>
|
Jake White
|
+
+ 18
+ |
+
+ 18900010002
+ |
+
+ Dublin No. 2 Lake Park
+ |
diff --git a/components/table/demo/colspan-rowspan.tsx b/components/table/demo/colspan-rowspan.tsx
index f879b6b4c187..78cb0f504d79 100644
--- a/components/table/demo/colspan-rowspan.tsx
+++ b/components/table/demo/colspan-rowspan.tsx
@@ -14,7 +14,7 @@ interface DataType {
// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const sharedOnCell = (_: DataType, index: number) => {
- if (index === 4) {
+ if (index === 1) {
return { colSpan: 0 };
}
@@ -27,7 +27,7 @@ const columns: ColumnsType = [
dataIndex: 'name',
render: (text) => {text},
onCell: (_, index) => ({
- colSpan: (index as number) < 4 ? 1 : 5,
+ colSpan: index === 1 ? 5 : 1,
}),
},
{
@@ -40,14 +40,14 @@ const columns: ColumnsType = [
colSpan: 2,
dataIndex: 'tel',
onCell: (_, index) => {
- if (index === 2) {
+ if (index === 3) {
return { rowSpan: 2 };
}
// These two are merged into above cell
- if (index === 3) {
+ if (index === 4) {
return { rowSpan: 0 };
}
- if (index === 4) {
+ if (index === 1) {
return { colSpan: 0 };
}
diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx
index f8c7d28be967..d259a3863ca7 100644
--- a/components/table/style/index.tsx
+++ b/components/table/style/index.tsx
@@ -82,7 +82,7 @@ const genTableStyle: GenerateStyle = (token) => {
tableBg,
tableRadius,
tableHeaderTextColor,
- motionDurationSlow,
+ motionDurationMid,
tableHeaderBg,
tableHeaderCellSplitColor,
tableRowHoverBg,
@@ -104,7 +104,7 @@ const genTableStyle: GenerateStyle = (token) => {
...resetComponent(token),
fontSize: tableFontSize,
background: tableBg,
- borderRadius: tableRadius,
+ borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
},
// https://github.com/ant-design/ant-design/issues/17611
table: {
@@ -144,7 +144,7 @@ const genTableStyle: GenerateStyle = (token) => {
textAlign: 'start',
background: tableHeaderBg,
borderBottom: tableBorder,
- transition: `background ${motionDurationSlow} ease`,
+ transition: `background ${motionDurationMid} ease`,
"&[colspan]:not([colspan='1'])": {
textAlign: 'center',
@@ -159,7 +159,7 @@ const genTableStyle: GenerateStyle = (token) => {
height: '1.6em',
backgroundColor: tableHeaderCellSplitColor,
transform: 'translateY(-50%)',
- transition: `background-color ${motionDurationSlow}`,
+ transition: `background-color ${motionDurationMid}`,
content: '""',
},
},
@@ -170,11 +170,42 @@ const genTableStyle: GenerateStyle = (token) => {
},
// ============================ Body ============================
+ // Borderless Table has unique hover style, which would be implemented with `borderTop`.
+ [`${componentCls}:not(${componentCls}-bordered)`]: {
+ [`${componentCls}-tbody`]: {
+ '> tr': {
+ '> td': {
+ borderTop: tableBorder,
+ },
+
+ '&:last-child > td': {
+ borderBottom: tableBorder,
+ },
+
+ [`&:first-child > td,
+ &${componentCls}-measure-row + tr > td`]: {
+ borderTop: 'none',
+ },
+ },
+ },
+ },
+
+ // Bordered Table remains simple `borderBottom`.
+ // Ref issue: https://github.com/ant-design/ant-design/issues/38724
+ [`${componentCls}${componentCls}-bordered`]: {
+ [`${componentCls}-tbody`]: {
+ '> tr': {
+ '> td': {
+ borderBottom: tableBorder,
+ },
+ },
+ },
+ },
+
[`${componentCls}-tbody`]: {
'> tr': {
'> td': {
- borderTop: tableBorder,
- transition: `background ${motionDurationSlow}, border-color ${motionDurationSlow}`,
+ transition: `background ${motionDurationMid}, border-color ${motionDurationMid}`,
// ========================= Nest Table ===========================
[`
@@ -196,15 +227,6 @@ const genTableStyle: GenerateStyle = (token) => {
},
},
- '&:last-child > td': {
- borderBottom: tableBorder,
- },
-
- [`&:first-child > td,
- &${componentCls}-measure-row + tr > td`]: {
- borderTop: 'none',
- },
-
[`
&${componentCls}-row:hover > td,
> td${componentCls}-cell-row-hover
@@ -275,6 +297,7 @@ export default genComponentStyleHook('Table', (token) => {
colorTextPlaceholder,
colorTextHeading,
colorSplit,
+ colorBorderSecondary,
fontSize,
padding,
paddingXS,
@@ -312,12 +335,12 @@ export default genComponentStyleHook('Table', (token) => {
tablePaddingHorizontalMiddle: paddingXS,
tablePaddingVerticalSmall: paddingXS,
tablePaddingHorizontalSmall: paddingXS,
- tableBorderColor: colorSplit,
+ tableBorderColor: colorBorderSecondary,
tableHeaderTextColor: colorTextHeading,
tableHeaderBg: colorFillAlterSolid,
tableFooterTextColor: colorTextHeading,
tableFooterBg: colorFillAlterSolid,
- tableHeaderCellSplitColor: colorSplit,
+ tableHeaderCellSplitColor: colorBorderSecondary,
tableHeaderSortBg: colorFillSecondary,
tableHeaderSortHoverBg: colorFillContent,
tableHeaderIconColor: baseColorAction