diff --git a/assets/index.less b/assets/index.less
index 37c130df4..e2810cc23 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -112,18 +112,24 @@
     }
   }
 
-  &-ping-left {
-    .@{tablePrefixCls}-cell-fix-left-first::after,
-    .@{tablePrefixCls}-cell-fix-left-last::after {
-      box-shadow: inset 10px 0 8px -8px green;
-    }
+  &-fix-start-shadow::before,
+  &-fix-end-shadow::after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    bottom: 0;
+    width: 5px;
   }
 
-  &-ping-right {
-    .@{tablePrefixCls}-cell-fix-right-first::after,
-    .@{tablePrefixCls}-cell-fix-right-last::after {
-      box-shadow: inset -10px 0 8px -8px green;
-    }
+  &-fix-start-shadow-show::before {
+    inset-inline-start: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  &-fix-end-shadow-show::after {
+    inset-inline-end: 0;
+    background: rgba(0, 0, 0, 0.5);
   }
 
   // ================= Expand =================
diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
index 65e262aa9..c9a0f3802 100644
--- a/src/Cell/index.tsx
+++ b/src/Cell/index.tsx
@@ -141,9 +141,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
       return [false, false];
     }
 
-    const [scroll, scrollWidth] = scrollInfo;
-
-    const absScroll = Math.abs(scroll);
+    const [absScroll, scrollWidth] = scrollInfo;
 
     const showStartShadow = isFixStart && fixedStartShadow && absScroll > fixStart;
     const showEndShadow = isFixEnd && fixedEndShadow && scrollWidth - absScroll > fixEnd;
diff --git a/src/Table.tsx b/src/Table.tsx
index 9ecd81120..ef2480e48 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -347,8 +347,8 @@ function Table<RecordType extends DefaultRecordType>(
 
   // ====================== Scroll ======================
   const scrollSummaryRef = React.useRef<HTMLDivElement>();
-  const [pingedLeft, setPingedLeft] = React.useState(false);
-  const [pingedRight, setPingedRight] = React.useState(false);
+  const [shadowStart, setShadowStart] = React.useState(false);
+  const [shadowEnd, setShadowEnd] = React.useState(false);
   const [colsWidths, updateColsWidths] = useLayoutState(new Map<React.Key, number>());
 
   // Convert map to number width
@@ -440,7 +440,6 @@ function Table<RecordType extends DefaultRecordType>(
 
   const onInternalScroll = useEvent(
     ({ currentTarget, scrollLeft }: { currentTarget: HTMLElement; scrollLeft?: number }) => {
-      const isRTL = direction === 'rtl';
       const mergedScrollLeft =
         typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
 
@@ -463,24 +462,20 @@ function Table<RecordType extends DefaultRecordType>(
             : measureTarget.scrollWidth;
         const clientWidth = measureTarget.clientWidth;
 
+        const absScrollStart = Math.abs(mergedScrollLeft);
         setScrollInfo(ori => {
-          const nextScrollInfo: ScrollInfoType = [mergedScrollLeft, scrollWidth - clientWidth];
+          const nextScrollInfo: ScrollInfoType = [absScrollStart, scrollWidth - clientWidth];
           return isEqual(ori, nextScrollInfo) ? ori : nextScrollInfo;
         });
 
         // There is no space to scroll
         if (scrollWidth === clientWidth) {
-          setPingedLeft(false);
-          setPingedRight(false);
+          setShadowStart(false);
+          setShadowEnd(false);
           return;
         }
-        if (isRTL) {
-          setPingedLeft(-mergedScrollLeft < scrollWidth - clientWidth);
-          setPingedRight(-mergedScrollLeft > 0);
-        } else {
-          setPingedLeft(mergedScrollLeft > 0);
-          setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
-        }
+        setShadowStart(absScrollStart > 0);
+        setShadowEnd(absScrollStart < scrollWidth - clientWidth);
       }
     },
   );
@@ -497,8 +492,8 @@ function Table<RecordType extends DefaultRecordType>(
         scrollLeft: scrollBodyRef.current?.scrollLeft,
       });
     } else {
-      setPingedLeft(false);
-      setPingedRight(false);
+      setShadowStart(false);
+      setShadowEnd(false);
     }
   };
 
@@ -771,8 +766,10 @@ function Table<RecordType extends DefaultRecordType>(
     <div
       className={classNames(prefixCls, className, {
         [`${prefixCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls}-ping-left`]: pingedLeft,
-        [`${prefixCls}-ping-right`]: pingedRight,
+        [`${prefixCls}-fix-start-shadow`]: horizonScroll,
+        [`${prefixCls}-fix-end-shadow`]: horizonScroll,
+        [`${prefixCls}-fix-start-shadow-show`]: horizonScroll && shadowStart,
+        [`${prefixCls}-fix-end-shadow-show`]: horizonScroll && shadowEnd,
         [`${prefixCls}-layout-fixed`]: tableLayout === 'fixed',
         [`${prefixCls}-fixed-header`]: fixHeader,
         /** No used but for compatible */
diff --git a/tests/FixedColumn.spec.tsx b/tests/FixedColumn.spec.tsx
index f8ba6904b..3e7a5b493 100644
--- a/tests/FixedColumn.spec.tsx
+++ b/tests/FixedColumn.spec.tsx
@@ -140,12 +140,8 @@ describe('Table.FixedColumn', () => {
         fireEvent.scroll(tableContent);
       }
     });
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
-    ).toBeTruthy();
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
-    ).toBeTruthy();
+    expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-start-shadow-show');
+    expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
 
     act(() => {
       if (tableContent) {
@@ -155,12 +151,8 @@ describe('Table.FixedColumn', () => {
         fireEvent.scroll(tableContent);
       }
     });
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
-    ).toBeFalsy();
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
-    ).toBeTruthy();
+    expect(container.querySelector('.rc-table')).not.toHaveClass('rc-table-fix-start-shadow-show');
+    expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
 
     act(() => {
       if (tableContent) {
@@ -170,12 +162,8 @@ describe('Table.FixedColumn', () => {
         fireEvent.scroll(tableContent);
       }
     });
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
-    ).toBeTruthy();
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
-    ).toBeFalsy();
+    expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-start-shadow-show');
+    expect(container.querySelector('.rc-table')).not.toHaveClass('rc-table-fix-end-shadow-show');
 
     act(() => {
       if (tableContent) {
@@ -185,12 +173,8 @@ describe('Table.FixedColumn', () => {
         fireEvent.scroll(tableContent);
       }
     });
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
-    ).toBeFalsy();
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
-    ).toBeFalsy();
+    expect(container.querySelector('.rc-table')).not.toHaveClass('rc-table-fix-start-shadow-show');
+    expect(container.querySelector('.rc-table')).not.toHaveClass('rc-table-fix-end-shadow-show');
   });
 
   it('ellipsis will wrap additional dom', () => {
@@ -349,11 +333,7 @@ describe('Table.FixedColumn', () => {
         fireEvent.scroll(tableContent);
       }
     });
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
-    ).toBeTruthy();
-    expect(
-      container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
-    ).toBeTruthy();
+    expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-start-shadow-show');
+    expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
   });
 });
diff --git a/tests/Virtual.spec.tsx b/tests/Virtual.spec.tsx
index 947a32593..f34267f87 100644
--- a/tests/Virtual.spec.tsx
+++ b/tests/Virtual.spec.tsx
@@ -528,9 +528,7 @@ describe('Table.Virtual', () => {
 
       await waitFakeTimer();
 
-      expect(
-        container.querySelector('.rc-table').classList.contains('rc-table-ping-right'),
-      ).toBeTruthy();
+      expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
     });
 
     it('right shadow should display correctly when showHeader is false', async () => {
@@ -558,9 +556,7 @@ describe('Table.Virtual', () => {
 
       await waitFakeTimer();
 
-      expect(
-        container.querySelector('.rc-table').classList.contains('rc-table-ping-right'),
-      ).toBeTruthy();
+      expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
     });
   });
 });
diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap
index a62669dc8..c7c405d5e 100644
--- a/tests/__snapshots__/ExpandRow.spec.jsx.snap
+++ b/tests/__snapshots__/ExpandRow.spec.jsx.snap
@@ -107,7 +107,7 @@ exports[`Table.Expand > childrenColumnName 1`] = `
 
 exports[`Table.Expand > does not crash if scroll is not set 1`] = `
 <div
-  class="rc-table rc-table-scroll-horizontal"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
 >
   <div
     class="rc-table-container"
@@ -229,7 +229,7 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
 
 exports[`Table.Expand > does not crash if scroll is not set 2`] = `
 <div
-  class="rc-table rc-table-scroll-horizontal"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
 >
   <div
     class="rc-table-container"
@@ -438,7 +438,7 @@ exports[`Table.Expand > not use nest when children is invalidate 1`] = `
 
 exports[`Table.Expand > renders fixed column correctly > work 1`] = `
 <div
-  class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
 >
   <div
     class="rc-table-container"
@@ -906,7 +906,7 @@ exports[`Table.Expand > renders tree row correctly with different children 1`] =
 
 exports[`Table.Expand > work in expandable fix 1`] = `
 <div
-  class="rc-table rc-table-scroll-horizontal"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
 >
   <div
     class="rc-table-container"
@@ -1028,7 +1028,7 @@ exports[`Table.Expand > work in expandable fix 1`] = `
 
 exports[`Table.Expand > work in expandable fix 2`] = `
 <div
-  class="rc-table rc-table-fixed-column rc-table-scroll-horizontal"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal"
 >
   <div
     class="rc-table-container"
diff --git a/tests/__snapshots__/FixedColumn.spec.tsx.snap b/tests/__snapshots__/FixedColumn.spec.tsx.snap
index fe1e10d9f..54dab8627 100644
--- a/tests/__snapshots__/FixedColumn.spec.tsx.snap
+++ b/tests/__snapshots__/FixedColumn.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
 <div
-  class="rc-table rc-table-rtl rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
+  class="rc-table rc-table-rtl rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
 >
   <div
     class="rc-table-container"
@@ -753,7 +753,7 @@ exports[`Table.FixedColumn > renders correctly > all column has width should use
 
 exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
 <div
-  class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
 >
   <div
     class="rc-table-container"
@@ -1542,7 +1542,7 @@ exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
 
 exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
 <div
-  class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
 >
   <div
     class="rc-table-container"
@@ -1801,7 +1801,7 @@ exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
 
 exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
 <div
-  class="rc-table rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
 >
   <div
     class="rc-table-container"
@@ -2644,7 +2644,7 @@ exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
 
 exports[`Table.FixedColumn > renders correctly > scrollXY - without data 1`] = `
 <div
-  class="rc-table rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
 >
   <div
     class="rc-table-container"
diff --git a/tests/__snapshots__/Table.spec.jsx.snap b/tests/__snapshots__/Table.spec.jsx.snap
index 1a2206424..dcee6c815 100644
--- a/tests/__snapshots__/Table.spec.jsx.snap
+++ b/tests/__snapshots__/Table.spec.jsx.snap
@@ -76,7 +76,7 @@ exports[`Table.Basic > custom components > renders correctly 1`] = `
 
 exports[`Table.Basic > custom components > renders fixed column and header correctly 1`] = `
 <div
-  class="rc-table rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
 >
   <div
     class="rc-table-container"
@@ -209,7 +209,7 @@ exports[`Table.Basic > custom components > renders fixed column and header corre
 
 exports[`Table.Basic > custom components > scroll content > with scroll 1`] = `
 <div
-  class="rc-table rc-table-fixed-header rc-table-scroll-horizontal"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-scroll-horizontal"
 >
   <div
     class="rc-table-container"