diff --git a/plugins/woocommerce-admin/client/components/table/style.scss b/plugins/woocommerce-admin/client/components/table/style.scss
index 9c7a7a0814f..648894a849f 100644
--- a/plugins/woocommerce-admin/client/components/table/style.scss
+++ b/plugins/woocommerce-admin/client/components/table/style.scss
@@ -144,11 +144,13 @@
 		width: 41px;
 		height: 100%;
 		background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-		visibility: hidden;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.3s;
 	}
 
 	&.is-scrollable::after {
-		visibility: visible;
+		opacity: 1;
 	}
 
 	table {
diff --git a/plugins/woocommerce-admin/client/components/table/table.js b/plugins/woocommerce-admin/client/components/table/table.js
index 6dde99d1caf..2d89d3ef4c3 100644
--- a/plugins/woocommerce-admin/client/components/table/table.js
+++ b/plugins/woocommerce-admin/client/components/table/table.js
@@ -95,7 +95,7 @@ class Table extends Component {
 		const table = this.container.current;
 		const scrolledToEnd = table.scrollWidth - table.scrollLeft <= table.offsetWidth;
 		this.setState( {
-			isScrollable: scrolledToEnd ? false : true,
+			isScrollable: ! scrolledToEnd,
 		} );
 	};
 
@@ -110,9 +110,9 @@ class Table extends Component {
 			rowHeader,
 			rows,
 		} = this.props;
-		const { tabIndex } = this.state;
+		const { isScrollable, tabIndex } = this.state;
 		const classes = classnames( 'woocommerce-table__table', classNames, {
-			'is-scrollable': this.state.isScrollable,
+			'is-scrollable': isScrollable,
 		} );
 		const sortedBy = query.orderby || get( find( headers, { defaultSort: true } ), 'key', false );
 		const sortDir = query.order || DESC;