diff --git a/assets/index.less b/assets/index.less
index 115861aee..22403037d 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -39,13 +39,19 @@
   }
 
   &-fixed-header &-scroll &-header {
-    overflow-x: scroll;
     padding-bottom: 20px;
     margin-bottom: -20px;
-    overflow-y: scroll;
+    overflow: scroll;
     box-sizing: border-box;
   }
 
+  &-hide-scrollbar {
+    scrollbar-color: transparent transparent;
+    &::-webkit-scrollbar {
+      background-color: transparent;
+    }
+  }
+
   // https://github.com/ant-design/ant-design/issues/10828
   &-fixed-columns-in-body {
     visibility: hidden;
diff --git a/src/BodyTable.js b/src/BodyTable.js
index aaf39b9f5..ffe606332 100644
--- a/src/BodyTable.js
+++ b/src/BodyTable.js
@@ -40,7 +40,7 @@ export default function BodyTable(props, { table }) {
     useFixedHeader = true;
 
     // Add negative margin bottom for scroll bar overflow bug
-    const scrollbarWidth = measureScrollbar();
+    const scrollbarWidth = measureScrollbar({ direction: 'horizontal', prefixCls });
     if (scrollbarWidth > 0 && fixed) {
       bodyStyle.marginBottom = `-${scrollbarWidth}px`;
       bodyStyle.paddingBottom = '0px';
diff --git a/src/HeadTable.js b/src/HeadTable.js
index 80618f9c1..a94cb62d0 100644
--- a/src/HeadTable.js
+++ b/src/HeadTable.js
@@ -13,7 +13,7 @@ export default function HeadTable(props, { table }) {
   if (scroll.y) {
     useFixedHeader = true;
     // Add negative margin bottom for scroll bar overflow bug
-    const scrollbarWidth = measureScrollbar('horizontal');
+    const scrollbarWidth = measureScrollbar({ direction: 'horizontal', prefixCls });
     if (scrollbarWidth > 0 && !fixed) {
       headStyle.marginBottom = `-${scrollbarWidth}px`;
       headStyle.paddingBottom = '0px';
@@ -28,7 +28,7 @@ export default function HeadTable(props, { table }) {
     <div
       key="headTable"
       ref={fixed ? null : saveRef('headTable')}
-      className={`${prefixCls}-header`}
+      className={`${prefixCls}-header ${prefixCls}-hide-scrollbar`}
       style={headStyle}
       onScroll={handleBodyScrollLeft}
     >
diff --git a/src/utils.js b/src/utils.js
index d16f71496..8da2c10c1 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -14,7 +14,7 @@ const scrollbarMeasure = {
 // This const is used for colgroup.col internal props. And should not provides to user.
 export const INTERNAL_COL_DEFINE = 'RC_TABLE_INTERNAL_COL_DEFINE';
 
-export function measureScrollbar(direction = 'vertical') {
+export function measureScrollbar({ direction = 'vertical', prefixCls }) {
   if (typeof document === 'undefined' || typeof window === 'undefined') {
     return 0;
   }
@@ -28,6 +28,8 @@ export function measureScrollbar(direction = 'vertical') {
   Object.keys(scrollbarMeasure).forEach(scrollProp => {
     scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
   });
+  // apply hide scrollbar className ahead
+  scrollDiv.className = `${prefixCls}-hide-scrollbar scroll-div-append-to-body`;
   // Append related overflow style
   if (isVertical) {
     scrollDiv.style.overflowY = 'scroll';
diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap
index c78c715dd..effea0eb4 100644
--- a/tests/__snapshots__/Table.spec.js.snap
+++ b/tests/__snapshots__/Table.spec.js.snap
@@ -246,7 +246,7 @@ exports[`Table custom components renders fixed column and header correctly 1`] =
       class="rc-table-scroll"
     >
       <div
-        class="rc-table-header"
+        class="rc-table-header rc-table-hide-scrollbar"
       >
         <table
           class=""
@@ -338,7 +338,7 @@ exports[`Table custom components renders fixed column and header correctly 1`] =
       class="rc-table-fixed-left"
     >
       <div
-        class="rc-table-header"
+        class="rc-table-header rc-table-hide-scrollbar"
       >
         <table
           class="rc-table-fixed"
@@ -407,7 +407,7 @@ exports[`Table custom components renders fixed column and header correctly 1`] =
       class="rc-table-fixed-right"
     >
       <div
-        class="rc-table-header"
+        class="rc-table-header rc-table-hide-scrollbar"
       >
         <table
           class="rc-table-fixed"
@@ -1213,7 +1213,7 @@ exports[`Table renders fixed header correctly 1`] = `
     class="rc-table-content"
   >
     <div
-      class="rc-table-header"
+      class="rc-table-header rc-table-hide-scrollbar"
     >
       <table
         class=""
@@ -1823,7 +1823,7 @@ exports[`Table scroll renders scroll.y is a number 1`] = `
       class="rc-table-scroll"
     >
       <div
-        class="rc-table-header"
+        class="rc-table-header rc-table-hide-scrollbar"
       >
         <table
           class=""