diff --git a/src/Body/MeasureCell.tsx b/src/Body/MeasureCell.tsx
index 1db7d06bb..abf0d03ae 100644
--- a/src/Body/MeasureCell.tsx
+++ b/src/Body/MeasureCell.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import ShadowComponent from './ShadowComponent';
 import type { ColumnType } from '../interface';
 
 export interface MeasureCellProps {
@@ -27,7 +28,9 @@ export default function MeasureCell({
   return (
     <ResizeObserver data={columnKey}>
       <th ref={cellRef} className={`${prefixCls}-measure-cell`}>
-        <div className={`${prefixCls}-measure-cell-content`}>{column?.title || '\xa0'}</div>
+        <ShadowComponent className={`${prefixCls}-measure-cell-content`}>
+          {column?.title || '\xa0'}
+        </ShadowComponent>
       </th>
     </ResizeObserver>
   );
diff --git a/src/Body/ShadowComponent.tsx b/src/Body/ShadowComponent.tsx
new file mode 100644
index 000000000..420f5b7da
--- /dev/null
+++ b/src/Body/ShadowComponent.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+function isShadowDomSupported() {
+  return typeof window !== 'undefined' && !!HTMLElement.prototype.attachShadow;
+}
+
+export default function ShadowComponent({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className: string;
+}) {
+  const hostRef = React.useRef<HTMLDivElement>(null);
+  const [shadowRoot, setShadowRoot] = React.useState<ShadowRoot | null>(null);
+  const [shadowSupported, setShadowSupported] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    // 检查是否支持 Shadow DOM
+    if (!isShadowDomSupported()) {
+      setShadowSupported(false);
+      return;
+    }
+    if (hostRef.current && !shadowRoot) {
+      const shadow = hostRef.current.attachShadow({ mode: 'open' });
+      setShadowRoot(shadow);
+    }
+  }, [shadowRoot]);
+
+  // 如果不支持 Shadow DOM，直接渲染 children
+  if (!shadowSupported) {
+    return (
+      <div ref={hostRef} className={className}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={hostRef} className={className}>
+      {shadowRoot && createPortal(children, shadowRoot)}
+    </div>
+  );
+}
diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap
index 2d85db84f..c693bca3d 100644
--- a/tests/__snapshots__/ExpandRow.spec.jsx.snap
+++ b/tests/__snapshots__/ExpandRow.spec.jsx.snap
@@ -195,36 +195,28 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                   
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Age
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Gender
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -380,36 +372,28 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                   
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Age
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Gender
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -683,36 +667,28 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                   
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Age
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Gender
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -1237,36 +1213,28 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                   
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Age
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Gender
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -1425,36 +1393,28 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Age
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Gender
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                   
-                </div>
+                />
               </th>
             </tr>
             <tr
diff --git a/tests/__snapshots__/FixedColumn.spec.tsx.snap b/tests/__snapshots__/FixedColumn.spec.tsx.snap
index b70db2522..5a4601f5f 100644
--- a/tests/__snapshots__/FixedColumn.spec.tsx.snap
+++ b/tests/__snapshots__/FixedColumn.spec.tsx.snap
@@ -130,108 +130,84 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title1
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title2
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title3
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title4
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title5
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title6
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title7
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title8
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title9
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title10
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title11
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title12
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -954,108 +930,84 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title1
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title2
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title3
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title4
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title5
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title6
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title7
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title8
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title9
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title10
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title11
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title12
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -1773,108 +1725,84 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title1
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title2
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title3
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title4
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title5
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title6
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title7
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title8
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title9
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title10
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title11
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title12
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -2116,108 +2044,84 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title1
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title2
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title3
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title4
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title5
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title6
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title7
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title8
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title9
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title10
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title11
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title12
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -2968,108 +2872,84 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title1
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title2
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title3
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title4
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title5
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title6
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title7
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title8
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title9
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title10
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title11
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  title12
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -3213,36 +3093,28 @@ exports[`Table.FixedColumn > shadow should be shown when there are columns where
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Other
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Company
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Gender
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -5763,72 +5635,56 @@ exports[`Table.FixedColumn > shadow should display correctly 1`] = `
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Age
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Street
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Door No.
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Building
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Company Address
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Company Name
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Gender
-                </div>
+                />
               </th>
             </tr>
             <tr
@@ -11755,36 +11611,28 @@ exports[`Table.FixedColumn > shadow should display correctly 2`] = `
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name0
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name1
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name2
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name3
-                </div>
+                />
               </th>
             </tr>
             <tr
diff --git a/tests/__snapshots__/Table.spec.jsx.snap b/tests/__snapshots__/Table.spec.jsx.snap
index dcc9239b3..2c3450551 100644
--- a/tests/__snapshots__/Table.spec.jsx.snap
+++ b/tests/__snapshots__/Table.spec.jsx.snap
@@ -275,27 +275,21 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Name
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Age
-                </div>
+                />
               </th>
               <th
                 class="rc-table-measure-cell"
               >
                 <div
                   class="rc-table-measure-cell-content"
-                >
-                  Gender
-                </div>
+                />
               </th>
             </tr>
             <tr