diff --git a/package.json b/package.json
index b0d18dfba..59dd7bccd 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,8 @@
     "rc-util": "^5.27.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^28.1.2",
     "@types/react": "^17.0.35",
@@ -84,7 +86,7 @@
     "rc-animate": "^3.0.0",
     "rc-dropdown": "~4.0.1",
     "rc-menu": "~9.6.0",
-    "rc-test": "^7.0.2",
+    "rc-test": "^7.0.14",
     "rc-tooltip": "^5.2.1",
     "react": "^16.0.0",
     "react-dnd": "^2.5.4",
diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
index ce727f7ef..fad3ed55f 100644
--- a/src/Cell/index.tsx
+++ b/src/Cell/index.tsx
@@ -148,8 +148,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   }
 
   // ================ RowSpan & ColSpan =================
-  const mergedColSpan = legacyCellProps?.colSpan ?? colSpan ?? additionalProps.colSpan ?? 1;
-  const mergedRowSpan = legacyCellProps?.rowSpan ?? rowSpan ?? additionalProps.rowSpan ?? 1;
+  const mergedColSpan = legacyCellProps?.colSpan ?? additionalProps.colSpan ?? colSpan ?? 1;
+  const mergedRowSpan = legacyCellProps?.rowSpan ?? additionalProps.rowSpan ?? rowSpan ?? 1;
 
   // ====================== Hover =======================
   const [hovering, onHover] = useHoverState(index, mergedRowSpan);
diff --git a/tests/ColSpan.spec.js b/tests/ColSpan.spec.js
new file mode 100644
index 000000000..d58298ffd
--- /dev/null
+++ b/tests/ColSpan.spec.js
@@ -0,0 +1,54 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import Table from '../src';
+
+describe('Table.ColSpan', () => {
+  it('hover the tree table', () => {
+    const { container } = render(
+      <Table
+        columns={[
+          {
+            title: 'Parent',
+            key: 'parent',
+            children: [
+              {
+                title: 'name',
+                key: 'name',
+                dataIndex: 'name',
+                onHeaderCell: () => ({
+                  colSpan: 2,
+                }),
+              },
+              {
+                title: 'age',
+                key: 'age',
+                dataIndex: 'age',
+                onHeaderCell: () => ({ colSpan: 0 }),
+              },
+            ],
+          },
+        ]}
+        data={[
+          {
+            key: '1',
+            name: 'Little',
+            age: 2,
+          },
+        ]}
+      />,
+    );
+
+    // 2 rows
+    expect(container.querySelector('thead').querySelectorAll('tr')).toHaveLength(2);
+
+    // one cell
+    const lastTr = container.querySelector('thead').querySelectorAll('tr')[1];
+    expect(lastTr.querySelectorAll('th')).toHaveLength(1);
+    expect(lastTr.querySelector('th')).toHaveAttribute('colSpan', '2');
+
+    // Data 2 cells
+    expect(
+      container.querySelector('tbody').querySelectorAll('tr')[0].querySelectorAll('td'),
+    ).toHaveLength(2);
+  });
+});