fix(Table): Hide header extra scrollbar

close ant-design/ant-design#4637 close ant-design/ant-design#14211
react-component · Jun 4, 2019 · 4219e21 · 4219e21
1 parent f414865
commit 4219e21
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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({ prefixCls });
     if (scrollbarWidth > 0 && fixed) {
       bodyStyle.marginBottom = `-${scrollbarWidth}px`;
       bodyStyle.paddingBottom = '0px';

diff --git 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
@@ -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`;
   // Append related overflow style
   if (isVertical) {
     scrollDiv.style.overflowY = 'scroll';