Merge pull request #333 from react-component/fix-extra-table-header-s…

…crollbar fix(Table): Hide header extra scrollbar
react-component · Jun 4, 2019 · 55347a5 · 55347a5
2 parents f414865 + 810e82b
commit 55347a5
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 11 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({ direction: 'horizontal', 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 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
@@ -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=""