avoid vertical scrollbar appear when scroll.x is true

close ant-design/ant-design#20705
react-component · Mar 5, 2020 · 9b0f790 · 9b0f790 · vercel · Mar 5, 2020
1 parent 3896695
commit 9b0f790
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/src/Table.tsx b/src/Table.tsx
@@ -356,6 +356,12 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
 
   if (fixColumn) {
     scrollXStyle = { overflowX: 'scroll' };
+    // When no vertical scrollbar, should hide it
+    // https://github.com/ant-design/ant-design/pull/20705
+    // https://github.com/ant-design/ant-design/issues/21879
+    if (!fixHeader) {
+      scrollYStyle = { overflowY: 'hidden' };
+    }
     scrollTableStyle = {
       width: scroll.x === true ? 'auto' : scroll.x,
       minWidth: '100%',

diff --git a/tests/Scroll.spec.js b/tests/Scroll.spec.js
@@ -15,6 +15,8 @@ describe('Table.Scroll', () => {
   it('renders scroll.x is true', () => {
     const wrapper = mount(createTable({ scroll: { x: true } }));
     expect(wrapper.find('table').props().style.width).toEqual('auto');
+    expect(wrapper.find('.rc-table-content').props().style.overflowX).toEqual('scroll');
+    expect(wrapper.find('.rc-table-content').props().style.overflowY).toEqual('hidden');
   });
 
   it('renders scroll.x is a number', () => {
@@ -27,6 +29,12 @@ describe('Table.Scroll', () => {
     expect(wrapper.find('.rc-table-body').props().style.maxHeight).toEqual(200);
   });
 
+  it('renders scroll.x and scroll.y are both true', () => {
+    const wrapper = mount(createTable({ scroll: { x: true, y: 200 } }));
+    expect(wrapper.find('.rc-table-body').props().style.overflowX).toEqual('scroll');
+    expect(wrapper.find('.rc-table-body').props().style.overflowY).toEqual('scroll');
+  });
+
   it('fire scroll event', () => {
     jest.useFakeTimers();
     let scrollLeft = 0;

diff --git a/tests/__snapshots__/ExpandRow.spec.js.snap b/tests/__snapshots__/ExpandRow.spec.js.snap
@@ -113,7 +113,7 @@ exports[`Table.Expand renders fixed column correctly work 1`] = `
   >
     <div
       class="rc-table-content"
-      style="overflow-x: scroll;"
+      style="overflow-x: scroll; overflow-y: hidden;"
     >
       <table
         style="width: 903px; min-width: 100%; table-layout: fixed;"

diff --git a/tests/__snapshots__/FixedColumn.spec.js.snap b/tests/__snapshots__/FixedColumn.spec.js.snap
@@ -9,7 +9,7 @@ exports[`Table.FixedColumn renders correctly scrollX - with data 1`] = `
   >
     <div
       class="rc-table-content"
-      style="overflow-x: scroll;"
+      style="overflow-x: scroll; overflow-y: hidden;"
     >
       <table
         style="width: 1200px; min-width: 100%; table-layout: fixed;"
@@ -629,7 +629,7 @@ exports[`Table.FixedColumn renders correctly scrollX - without data 1`] = `
   >
     <div
       class="rc-table-content"
-      style="overflow-x: scroll;"
+      style="overflow-x: scroll; overflow-y: hidden;"
     >
       <table
         style="width: 1200px; min-width: 100%; table-layout: fixed;"
@@ -1448,7 +1448,7 @@ exports[`Table.FixedColumn renders correctly scrollXY - without data 1`] = `
   >
     <div
       class="rc-table-content"
-      style="overflow-x: scroll;"
+      style="overflow-x: scroll; overflow-y: hidden;"
     >
       <table
         style="width: 1200px; min-width: 100%; table-layout: fixed;"