From ee4c5d6f1491fc724c7b8f61dc2f72377d666351 Mon Sep 17 00:00:00 2001
From: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:47:19 -0700
Subject: [PATCH] fix: table: updates scrollable div by removing deprecated css
 property (#655)

* fix: table: updates scrollable div by removing deprecated css property

* chore: table: update snaps

* chore: table: update border to hide in mozilla browsers

* chore: table: updates snaps and sticky unit test
---
 .../DatePicker/Styles/mixins.scss             |  85 ++---------
 .../Table/Internal/Body/Scroller.tsx          |  31 ++--
 src/components/Table/Internal/Cell/index.tsx  |   5 +
 .../Table/Internal/FixedHolder/index.tsx      |  13 +-
 src/components/Table/Internal/OcTable.tsx     | 103 ++++++++-----
 .../Table/Internal/OcTable.types.ts           |  19 ++-
 .../Table/Internal/Tests/Scroll.test.js       |   6 +-
 .../Table/Internal/Tests/Sticky.test.js       |   1 +
 .../__snapshots__/ExpandRow.expandable1.shot  |   4 +-
 .../__snapshots__/ExpandRow.expandable2.shot  |   4 +-
 .../ExpandRow.renderfixedcol.shot             | 100 ++++++-------
 .../__snapshots__/ExpandRow.scrollunset1.shot |   4 +-
 .../__snapshots__/ExpandRow.scrollunset2.shot |   4 +-
 .../FixedColumn.renderwithdata.shot           | 136 +++++++++---------
 .../FixedColumn.renderwithoutdata.shot        |  52 +++----
 .../Tests/__snapshots__/FixedColumn.rtl.shot  |  58 ++++----
 .../Table.renderfixedcolheader.shot           |  78 +++++-----
 .../__snapshots__/Table.scrollcontent.shot    |   2 +-
 .../Table/Internal/octable.module.scss        | 100 ++++---------
 .../Table.fixselectionexpandonleft.shot       |   4 +-
 .../__snapshots__/Table.fixselectionleft.shot |   4 +-
 .../Table.fixselectionwithcols.shot           |   4 +-
 .../__snapshots__/empty.renderfixedcols.shot  |   4 +-
 23 files changed, 376 insertions(+), 445 deletions(-)

diff --git a/src/components/DateTimePicker/DatePicker/Styles/mixins.scss b/src/components/DateTimePicker/DatePicker/Styles/mixins.scss
index 7386222ab..39bee3eb2 100644
--- a/src/components/DateTimePicker/DatePicker/Styles/mixins.scss
+++ b/src/components/DateTimePicker/DatePicker/Styles/mixins.scss
@@ -61,8 +61,12 @@ $picker-input-padding-vertical: max(
 
   &::-webkit-scrollbar {
     background-color: transparent;
-    height: 16px;
-    width: 16px;
+    height: $space-m;
+    width: $space-m;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
   }
 
   &::-webkit-scrollbar-corner {
@@ -71,6 +75,9 @@ $picker-input-padding-vertical: max(
 
   &::-webkit-scrollbar-thumb {
     background-color: transparent;
+    border: 5px solid transparent;
+    border-radius: $border-radius-xl;
+    box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
   }
 
   &::-webkit-scrollbar-track {
@@ -78,78 +85,8 @@ $picker-input-padding-vertical: max(
     background-color: transparent;
   }
 
-  @supports (overflow: overlay) {
-    overflow: overlay;
-
-    &:focus-within,
-    &:focus-visible,
-    &:hover,
-    &:hover:focus {
-      &::-webkit-scrollbar {
-        display: block;
-        height: 16px;
-        width: 16px;
-      }
-
-      &::-webkit-scrollbar-button {
-        display: none;
-      }
-
-      &::-webkit-scrollbar-corner {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: transparent;
-        border: 5px solid transparent;
-        border-radius: 24px;
-        box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
-      }
-    }
-  }
-
-  @supports not (overflow: overlay) {
-    overflow: auto;
-
-    &:focus-within,
-    &:focus-visible,
-    &:hover,
-    &:hover:focus {
-      -ms-overflow-style: none;
-      scrollbar-width: thin;
-
-      &::-webkit-scrollbar {
-        background-color: var(--picker-background-color);
-        height: 16px;
-        width: 16px;
-      }
-
-      &::-webkit-scrollbar-corner {
-        background-color: var(--picker-background-color);
-        border: 1px solid var(--picker-background-color);
-        border-bottom-right-radius: $picker-partial-border-radius;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: transparent;
-        border: 5px solid transparent;
-        border-radius: 24px;
-        box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
-      }
-
-      &::-webkit-scrollbar-track {
-        -webkit-box-shadow: none;
-        background-color: var(--picker-background-color);
-      }
-    }
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
   }
 }
 
diff --git a/src/components/Table/Internal/Body/Scroller.tsx b/src/components/Table/Internal/Body/Scroller.tsx
index 46f2003f6..90b31d608 100644
--- a/src/components/Table/Internal/Body/Scroller.tsx
+++ b/src/components/Table/Internal/Body/Scroller.tsx
@@ -9,7 +9,11 @@ import React, {
 import { ButtonShape, ButtonSize, SecondaryButton } from '../../../Button';
 import { IconName } from '../../../Icon';
 import { ColumnType } from '../../Table.types';
-import { ScrollerProps, ScrollerRef } from '../OcTable.types';
+import {
+  ScrollerProps,
+  ScrollerRef,
+  VERTICAL_SCROLL_OFFSET,
+} from '../OcTable.types';
 
 import styles from '../octable.module.scss';
 
@@ -24,9 +28,10 @@ export const Scroller = React.forwardRef(
       scrollBodyRef,
       stickyOffsets,
       scrollHeaderRef,
-      titleRef,
       scrollLeftAriaLabelText,
       scrollRightAriaLabelText,
+      titleRef,
+      verticalScroll = false,
     }: ScrollerProps<RecordType>,
     ref: ForwardedRef<ScrollerRef>
   ) => {
@@ -82,12 +87,13 @@ export const Scroller = React.forwardRef(
       const { height: stickyHeaderHeight = 0 } =
         scrollHeaderRef?.current?.getBoundingClientRect?.() || {};
       return (
-        rowTop -
-        scrollBodyTop +
-        stickyHeaderHeight +
-        rowHeight / 2 -
-        BUTTON_HEIGHT / 2 +
-        titleHeight
+        (rowTop -
+          scrollBodyTop +
+          stickyHeaderHeight +
+          rowHeight / 2 -
+          BUTTON_HEIGHT / 2 +
+          titleHeight) |
+        0
       );
     };
 
@@ -118,7 +124,7 @@ export const Scroller = React.forwardRef(
       });
     };
 
-    const noScroller = (): boolean => {
+    const noHorizontalScroller = (): boolean => {
       return (
         scrollBodyRef?.current?.clientWidth >=
         scrollBodyRef?.current?.scrollWidth
@@ -163,7 +169,7 @@ export const Scroller = React.forwardRef(
       };
     }, []);
 
-    if (noScroller()) return null;
+    if (noHorizontalScroller()) return null;
 
     return (
       <>
@@ -185,7 +191,10 @@ export const Scroller = React.forwardRef(
         <SecondaryButton
           classNames={styles.scrollerButton}
           style={{
-            right: rightButtonOffset + BUTTON_PADDING,
+            right:
+              rightButtonOffset +
+              (verticalScroll ? VERTICAL_SCROLL_OFFSET : 0) +
+              BUTTON_PADDING,
             opacity: rightButtonVisible && visible ? 1 : 0,
             top: getButtonTop(),
           }}
diff --git a/src/components/Table/Internal/Cell/index.tsx b/src/components/Table/Internal/Cell/index.tsx
index 3063bda90..5d235ed4c 100644
--- a/src/components/Table/Internal/Cell/index.tsx
+++ b/src/components/Table/Internal/Cell/index.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef, memo, Ref, useContext, useMemo } from 'react';
 import { mergeClasses } from '../../../../shared/utilities';
 import shallowEqual from 'shallowequal';
+import { VERTICAL_SCROLL_OFFSET } from '../OcTable.types';
 import type {
   RenderedCell,
   CellType,
@@ -179,6 +180,10 @@ function Cell<RecordType extends DefaultRecordType>(
   if (isFixRight) {
     fixedStyle.position = 'sticky';
     fixedStyle.right = fixRight as number;
+
+    if (fixRight <= VERTICAL_SCROLL_OFFSET) {
+      fixedStyle.borderRightColor = 'transparent';
+    }
   }
 
   // ====================== Align =======================
diff --git a/src/components/Table/Internal/FixedHolder/index.tsx b/src/components/Table/Internal/FixedHolder/index.tsx
index 036f8c7a7..daa300bcd 100644
--- a/src/components/Table/Internal/FixedHolder/index.tsx
+++ b/src/components/Table/Internal/FixedHolder/index.tsx
@@ -6,11 +6,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import {
-  fillRef,
-  isStyleSupport,
-  mergeClasses,
-} from '../../../../shared/utilities';
+import { fillRef, mergeClasses } from '../../../../shared/utilities';
 import ColGroup from '../ColGroup';
 import type { ColumnsType, ColumnType } from '../OcTable.types';
 import { FixedHeaderProps } from './FixedHolder.types';
@@ -56,11 +52,8 @@ const FixedHolder = forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
     ref
   ) => {
     const { scrollbarSize, isSticky } = useContext(TableContext);
-    const supportedScrollbarSize: number = isStyleSupport('scrollbar-gutter')
-      ? 0
-      : scrollbarSize;
     const combinationScrollBarSize: number =
-      isSticky && !fixHeader ? 0 : supportedScrollbarSize;
+      isSticky && !fixHeader ? 0 : scrollbarSize;
     const scrollRef: React.MutableRefObject<HTMLDivElement> =
       useRef<HTMLDivElement>(null);
 
@@ -90,7 +83,7 @@ const FixedHolder = forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
 
     // Check if all flattenColumns has width
     const allFlattenColumnsWithWidth: boolean = useMemo(
-      () => flattenColumns.every((column) => column.width >= 0),
+      () => flattenColumns.every((column) => Number(column.width) >= 0),
       [flattenColumns]
     );
 
diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx
index e1a603b7b..7ed67afb1 100644
--- a/src/components/Table/Internal/OcTable.tsx
+++ b/src/components/Table/Internal/OcTable.tsx
@@ -22,6 +22,8 @@ import ColumnGroup from './ColumnGroup';
 import Column from './Column';
 import Header from './Header/Header';
 import type {
+  ColumnType,
+  ColumnsType,
   CustomizeComponent,
   CustomizeScrollBody,
   DefaultRecordType,
@@ -30,11 +32,12 @@ import type {
   GetRowKey,
   Key,
   MemoTableContentProps,
+  OcTableProps,
+  ScrollerRef,
+  StickyOffsets,
   TableComponents,
   TableLayout,
-  OcTableProps,
   TriggerEventHandler,
-  ScrollerRef,
 } from './OcTable.types';
 import TableContext from './Context/TableContext';
 import BodyContext from './Context/BodyContext';
@@ -260,7 +263,10 @@ function OcTable<RecordType extends DefaultRecordType>(
     transformColumns
   );
 
-  const columnContext = useMemo(
+  const columnContext: {
+    columns: ColumnsType<RecordType>;
+    flattenColumns: readonly ColumnType<RecordType>[];
+  } = useMemo(
     () => ({
       columns,
       flattenColumns,
@@ -269,12 +275,18 @@ function OcTable<RecordType extends DefaultRecordType>(
   );
 
   // ====================== Scroll ======================
-  const fullTableRef = useRef<HTMLDivElement>();
-  const scrollHeaderRef = useRef<HTMLDivElement>();
-  const scrollBodyRef = useRef<HTMLDivElement>();
-  const scrollSummaryRef = useRef<HTMLDivElement>();
-  const titleRef = useRef<HTMLDivElement>(null);
-  const scrollerRef = useRef<ScrollerRef>(null);
+  const fullTableRef: React.MutableRefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>();
+  const scrollHeaderRef: React.MutableRefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>();
+  const scrollBodyRef: React.MutableRefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>();
+  const scrollSummaryRef: React.MutableRefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>();
+  const titleRef: React.MutableRefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>(null);
+  const scrollerRef: React.MutableRefObject<ScrollerRef> =
+    useRef<ScrollerRef>(null);
   const [pingedLeft, setPingedLeft] = useState<boolean>(false);
   const [pingedRight, setPingedRight] = useState<boolean>(false);
   const [colsWidths, updateColsWidths] = useLayoutState(
@@ -282,21 +294,31 @@ function OcTable<RecordType extends DefaultRecordType>(
   );
 
   // Convert map to number width
-  const colsKeys = getColumnsKey(flattenColumns);
-  const pureColWidths = colsKeys.map((columnKey) => colsWidths.get(columnKey));
-  const colWidths = useMemo(() => pureColWidths, [pureColWidths.join('_')]);
-  const stickyOffsets = useStickyOffsets(
+  const colsKeys: React.Key[] = getColumnsKey(flattenColumns);
+  const pureColWidths: number[] = colsKeys.map((columnKey) =>
+    colsWidths.get(columnKey)
+  );
+  const colWidths: number[] = useMemo(
+    () => pureColWidths,
+    [pureColWidths.join('_')]
+  );
+  const stickyOffsets: StickyOffsets = useStickyOffsets(
     colWidths,
     flattenColumns.length,
     direction
   );
-  const fixHeader = scroll && validateValue(scroll.y);
-  const horizonScroll =
+  const fixHeader: boolean = scroll && validateValue(scroll.y);
+  const horizontalScroll: boolean =
     (scroll && validateValue(scroll.x)) || Boolean(expandableConfig.fixed);
-  const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);
+  const verticalScroll: boolean =
+    (scroll && validateValue(scroll.y)) || Boolean(expandableConfig.fixed);
+  const fixColumn =
+    horizontalScroll && flattenColumns.some(({ fixed }) => fixed);
 
   // Sticky
-  const stickyRef = useRef<{ setScrollLeft: (left: number) => void }>();
+  const stickyRef: React.MutableRefObject<{
+    setScrollLeft: (left: number) => void;
+  }> = useRef<{ setScrollLeft: (left: number) => void }>();
   const {
     isSticky,
     offsetHeader,
@@ -307,8 +329,8 @@ function OcTable<RecordType extends DefaultRecordType>(
   } = useSticky(sticky);
 
   // Footer (Fix footer must fixed header)
-  const summaryNode = summary?.(mergedData);
-  const fixFooter =
+  const summaryNode: React.ReactNode = summary?.(mergedData);
+  const fixFooter: boolean | '' | 'top' | 'bottom' =
     (fixHeader || isSticky) &&
     React.isValidElement(summaryNode) &&
     summaryNode.type === Summary &&
@@ -321,13 +343,13 @@ function OcTable<RecordType extends DefaultRecordType>(
 
   if (fixHeader) {
     scrollYStyle = {
-      overflow: 'overlay',
+      overflow: 'auto',
       maxHeight: scroll.y,
     };
   }
 
-  if (horizonScroll) {
-    scrollXStyle = { overflow: 'overlay' };
+  if (horizontalScroll) {
+    scrollXStyle = { overflow: 'auto' };
     // When no vertical scrollbar, should hide it
     if (!fixHeader) {
       scrollYStyle = { overflowY: 'hidden' };
@@ -408,7 +430,7 @@ function OcTable<RecordType extends DefaultRecordType>(
   };
 
   const triggerOnScroll = (): void => {
-    if (horizonScroll && scrollBodyRef.current) {
+    if (horizontalScroll && scrollBodyRef.current) {
       onScroll({
         currentTarget: scrollBodyRef.current,
       } as React.UIEvent<HTMLDivElement>);
@@ -435,7 +457,7 @@ function OcTable<RecordType extends DefaultRecordType>(
     if (mounted.current) {
       triggerOnScroll();
     }
-  }, [horizonScroll, data, columns.length]);
+  }, [horizontalScroll, data, columns.length]);
   useEffect(() => {
     mounted.current = true;
   }, []);
@@ -509,7 +531,7 @@ function OcTable<RecordType extends DefaultRecordType>(
   const bodyTable = (
     <Body
       data={mergedData}
-      measureColumnWidth={fixHeader || horizonScroll || isSticky}
+      measureColumnWidth={fixHeader || horizontalScroll || isSticky}
       expandedKeys={mergedExpandedKeys}
       rowExpandable={rowExpandable}
       getRowKey={getRowKey}
@@ -564,16 +586,17 @@ function OcTable<RecordType extends DefaultRecordType>(
           ref={scrollBodyRef}
           className={styles.tableBody}
         >
-          {horizonScroll && showScroller && (
+          {horizontalScroll && showScroller && (
             <Scroller
               ref={scrollerRef}
               {...columnContext}
               scrollBodyRef={scrollBodyRef}
               stickyOffsets={stickyOffsets}
               scrollHeaderRef={scrollHeaderRef}
-              titleRef={titleRef}
               scrollLeftAriaLabelText={scrollLeftAriaLabelText}
               scrollRightAriaLabelText={scrollRightAriaLabelText}
+              titleRef={titleRef}
+              verticalScroll={verticalScroll}
             />
           )}
           <TableComponent
@@ -600,7 +623,7 @@ function OcTable<RecordType extends DefaultRecordType>(
     // Fixed holder share the props
     const fixedHolderProps = {
       noData: !mergedData.length,
-      maxContentScroll: horizonScroll && scroll.x === 'max-content',
+      maxContentScroll: horizontalScroll && scroll.x === 'max-content',
       ...headerProps,
       ...columnContext,
       direction,
@@ -672,15 +695,16 @@ function OcTable<RecordType extends DefaultRecordType>(
         onScroll={onScroll}
         ref={scrollBodyRef}
       >
-        {horizonScroll && showScroller && (
+        {horizontalScroll && showScroller && (
           <Scroller
             ref={scrollerRef}
             {...columnContext}
             scrollBodyRef={scrollBodyRef}
-            titleRef={titleRef}
-            stickyOffsets={stickyOffsets}
             scrollLeftAriaLabelText={scrollLeftAriaLabelText}
             scrollRightAriaLabelText={scrollRightAriaLabelText}
+            stickyOffsets={stickyOffsets}
+            titleRef={titleRef}
+            verticalScroll={verticalScroll}
           />
         )}
         <TableComponent
@@ -723,7 +747,7 @@ function OcTable<RecordType extends DefaultRecordType>(
         { ['table-layout-fixed']: tableLayout === 'fixed' },
         { ['table-fixed-header']: fixHeader },
         { [styles.tableFixedColumn]: fixColumn },
-        { ['table-scroll-horizontal']: horizonScroll },
+        { ['table-scroll-horizontal']: horizontalScroll },
         {
           ['table-has-fix-left']: flattenColumns[0] && flattenColumns[0].fixed,
         },
@@ -749,7 +773,14 @@ function OcTable<RecordType extends DefaultRecordType>(
             {title(mergedData)}
           </FrameWrapper>
         )}
-        <div className={styles.tableContainer}>{groupTableNode}</div>
+        <div
+          className={mergeClasses([
+            styles.tableContainer,
+            { [styles.tableContainerHorizontallyScrollable]: horizontalScroll },
+          ])}
+        >
+          {groupTableNode}
+        </div>
         {footer && (
           <FrameWrapper classNames={styles.tableFooter}>
             {footer(mergedData)}
@@ -759,7 +790,7 @@ function OcTable<RecordType extends DefaultRecordType>(
     </div>
   );
 
-  if (horizonScroll) {
+  if (horizontalScroll) {
     fullTable = (
       <ResizeObserver onResize={onFullTableResize}>{fullTable}</ResizeObserver>
     );
@@ -824,9 +855,9 @@ function OcTable<RecordType extends DefaultRecordType>(
       componentWidth,
       fixHeader,
       fixColumn,
-      horizonScroll,
+      horizonScroll: horizontalScroll,
     }),
-    [componentWidth, fixHeader, fixColumn, horizonScroll]
+    [componentWidth, fixHeader, fixColumn, horizontalScroll]
   );
 
   const ResizeContextValue = useMemo(
diff --git a/src/components/Table/Internal/OcTable.types.ts b/src/components/Table/Internal/OcTable.types.ts
index ffacd26da..0c4a75aae 100644
--- a/src/components/Table/Internal/OcTable.types.ts
+++ b/src/components/Table/Internal/OcTable.types.ts
@@ -1,6 +1,8 @@
 import type * as React from 'react';
 import { RefObject } from 'react';
 
+export const VERTICAL_SCROLL_OFFSET: number = 16;
+
 export type Key = React.Key;
 
 export type FixedType = 'left' | 'right' | boolean;
@@ -426,19 +428,24 @@ export interface ScrollerProps<RecordType> {
   stickyOffsets: StickyOffsets;
   scrollHeaderRef?: RefObject<HTMLDivElement>;
   /**
-   * Ref of the table title
+   * The Table scroller left button aria label.
+   * @default 'Scroll left'
    */
-  titleRef?: RefObject<HTMLDivElement>;
+  scrollLeftAriaLabelText?: string;
   /**
-   * The Table scroller right button aria label
+   * The Table scroller right button aria label.
    * @default 'Scroll right'
    */
   scrollRightAriaLabelText?: string;
   /**
-   * The Table scroller left button aria label
-   * @default 'Scroll left'
+   * Ref of the table title.
    */
-  scrollLeftAriaLabelText?: string;
+  titleRef?: RefObject<HTMLDivElement>;
+  /**
+   * The Table is vertically scrollable.
+   * @default false
+   */
+  verticalScroll?: boolean;
 }
 
 export type ScrollerRef = {
diff --git a/src/components/Table/Internal/Tests/Scroll.test.js b/src/components/Table/Internal/Tests/Scroll.test.js
index 912576fb4..ad7c2149e 100644
--- a/src/components/Table/Internal/Tests/Scroll.test.js
+++ b/src/components/Table/Internal/Tests/Scroll.test.js
@@ -31,7 +31,7 @@ describe('Table.Scroll', () => {
     const wrapper = mount(createTable({ scroll: { x: 100 } }));
     expect(wrapper.find('table').props().style.width).toEqual(100);
     expect(wrapper.find('.table-content').props().style.overflow).toEqual(
-      'overlay'
+      'auto'
     );
   });
 
@@ -47,9 +47,7 @@ describe('Table.Scroll', () => {
 
   it('renders scroll.x and scroll.y are both true', () => {
     const wrapper = mount(createTable({ scroll: { x: 200, y: 200 } }));
-    expect(wrapper.find('.table-body').props().style.overflow).toEqual(
-      'overlay'
-    );
+    expect(wrapper.find('.table-body').props().style.overflow).toEqual('auto');
   });
 
   it('fire scroll event', () => {
diff --git a/src/components/Table/Internal/Tests/Sticky.test.js b/src/components/Table/Internal/Tests/Sticky.test.js
index a0cac0b95..47eda7575 100644
--- a/src/components/Table/Internal/Tests/Sticky.test.js
+++ b/src/components/Table/Internal/Tests/Sticky.test.js
@@ -275,6 +275,7 @@ describe('Table.Sticky', () => {
     const wrapper = mount(<TableDemo />);
 
     expect(wrapper.find('.table-cell-fix-sticky').at(1).prop('style')).toEqual({
+      borderRightColor: 'transparent',
       position: 'sticky',
       right: 0,
     });
diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot
index cbbeba8f9..ae96db4ff 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot
@@ -9,13 +9,13 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
             "attribs": Object {
               "class": "table-content",
-              "style": "overflow: overlay; overflow-y: hidden;",
+              "style": "overflow: auto; overflow-y: hidden;",
             },
             "children": Array [
               Node {
diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot
index cbbeba8f9..ae96db4ff 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot
@@ -9,13 +9,13 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
             "attribs": Object {
               "class": "table-content",
-              "style": "overflow: overlay; overflow-y: hidden;",
+              "style": "overflow: auto; overflow-y: hidden;",
             },
             "children": Array [
               Node {
diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot
index 047e7214c..56ffa9db7 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot
@@ -9,13 +9,13 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
             "attribs": Object {
               "class": "table-content",
-              "style": "overflow: overlay; overflow-y: hidden;",
+              "style": "overflow: auto; overflow-y: hidden;",
             },
             "children": Array [
               Node {
@@ -97,7 +97,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -191,7 +191,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -277,7 +277,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -364,7 +364,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -1266,7 +1266,7 @@ LoadedCheerio {
                                       "next": Node {
                                         "attribs": Object {
                                           "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                          "style": "position: sticky; right: 0px;",
+                                          "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                         },
                                         "children": Array [
                                           Node {
@@ -1360,7 +1360,7 @@ LoadedCheerio {
                                     "next": Node {
                                       "attribs": Object {
                                         "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                        "style": "position: sticky; right: 0px;",
+                                        "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                       },
                                       "children": Array [
                                         Node {
@@ -1465,7 +1465,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -1571,7 +1571,7 @@ LoadedCheerio {
                                 Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -1868,7 +1868,7 @@ LoadedCheerio {
                                     "next": Node {
                                       "attribs": Object {
                                         "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                        "style": "position: sticky; right: 0px;",
+                                        "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                       },
                                       "children": Array [
                                         Node {
@@ -1962,7 +1962,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -2067,7 +2067,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -2173,7 +2173,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -3262,7 +3262,7 @@ LoadedCheerio {
                                       "next": Node {
                                         "attribs": Object {
                                           "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                          "style": "position: sticky; right: 0px;",
+                                          "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                         },
                                         "children": Array [
                                           Node {
@@ -3356,7 +3356,7 @@ LoadedCheerio {
                                     "next": Node {
                                       "attribs": Object {
                                         "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                        "style": "position: sticky; right: 0px;",
+                                        "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                       },
                                       "children": Array [
                                         Node {
@@ -3461,7 +3461,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -3567,7 +3567,7 @@ LoadedCheerio {
                                 Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -4521,7 +4521,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -4615,7 +4615,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4701,7 +4701,7 @@ LoadedCheerio {
                             "next": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -4788,7 +4788,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -5690,7 +5690,7 @@ LoadedCheerio {
                                     "next": Node {
                                       "attribs": Object {
                                         "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                        "style": "position: sticky; right: 0px;",
+                                        "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                       },
                                       "children": Array [
                                         Node {
@@ -5784,7 +5784,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -5889,7 +5889,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -5995,7 +5995,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -6292,7 +6292,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -6386,7 +6386,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -6491,7 +6491,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -6597,7 +6597,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -7686,7 +7686,7 @@ LoadedCheerio {
                                     "next": Node {
                                       "attribs": Object {
                                         "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                        "style": "position: sticky; right: 0px;",
+                                        "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                       },
                                       "children": Array [
                                         Node {
@@ -7780,7 +7780,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -7885,7 +7885,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -7991,7 +7991,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -9709,7 +9709,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -9803,7 +9803,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -9908,7 +9908,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -10014,7 +10014,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -10311,7 +10311,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -10405,7 +10405,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -10510,7 +10510,7 @@ LoadedCheerio {
                             "next": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -10616,7 +10616,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -11705,7 +11705,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -11799,7 +11799,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -11904,7 +11904,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -12010,7 +12010,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -12939,7 +12939,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -13033,7 +13033,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -13119,7 +13119,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -13206,7 +13206,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot
index a803bb2aa..0862c539d 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot
@@ -9,13 +9,13 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
             "attribs": Object {
               "class": "table-content",
-              "style": "overflow: overlay; overflow-y: hidden;",
+              "style": "overflow: auto; overflow-y: hidden;",
             },
             "children": Array [
               Node {
diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot
index a803bb2aa..0862c539d 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot
@@ -9,13 +9,13 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
             "attribs": Object {
               "class": "table-content",
-              "style": "overflow: overlay; overflow-y: hidden;",
+              "style": "overflow: auto; overflow-y: hidden;",
             },
             "children": Array [
               Node {
diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot
index 65f0fe087..09c693e37 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot
@@ -9,13 +9,13 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
             "attribs": Object {
               "class": "table-content",
-              "style": "overflow: overlay; overflow-y: hidden;",
+              "style": "overflow: auto; overflow-y: hidden;",
             },
             "children": Array [
               Node {
@@ -209,7 +209,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -275,7 +275,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -342,7 +342,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -880,7 +880,7 @@ LoadedCheerio {
                                     "next": Node {
                                       "attribs": Object {
                                         "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                        "style": "position: sticky; right: 0px;",
+                                        "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                       },
                                       "children": Array [
                                         Node {
@@ -938,7 +938,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -1005,7 +1005,7 @@ LoadedCheerio {
                                 Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -1138,7 +1138,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -1196,7 +1196,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -1263,7 +1263,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -1845,7 +1845,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -1911,7 +1911,7 @@ LoadedCheerio {
                             "next": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -1978,7 +1978,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -2516,7 +2516,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -2574,7 +2574,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -2641,7 +2641,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -2774,7 +2774,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -2832,7 +2832,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -2899,7 +2899,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -4029,7 +4029,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -4087,7 +4087,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4154,7 +4154,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -4287,7 +4287,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4345,7 +4345,7 @@ LoadedCheerio {
                             "next": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -4412,7 +4412,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -4969,7 +4969,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -5035,7 +5035,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -5102,7 +5102,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -5524,7 +5524,7 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
@@ -5585,7 +5585,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -5651,7 +5651,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -5718,7 +5718,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -5869,7 +5869,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -5935,7 +5935,7 @@ LoadedCheerio {
                             "next": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -6002,7 +6002,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -6136,7 +6136,7 @@ LoadedCheerio {
             "next": Node {
               "attribs": Object {
                 "class": "table-body",
-                "style": "overflow: overlay; max-height: 100px;",
+                "style": "overflow: auto; max-height: 100px;",
               },
               "children": Array [
                 Node {
@@ -6734,7 +6734,7 @@ LoadedCheerio {
                                     "next": Node {
                                       "attribs": Object {
                                         "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                        "style": "position: sticky; right: 0px;",
+                                        "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                       },
                                       "children": Array [
                                         Node {
@@ -6792,7 +6792,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -6859,7 +6859,7 @@ LoadedCheerio {
                                 Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -6992,7 +6992,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -7050,7 +7050,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -7117,7 +7117,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -8093,7 +8093,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -8151,7 +8151,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -8218,7 +8218,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -8351,7 +8351,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -8409,7 +8409,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -8476,7 +8476,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -9195,7 +9195,7 @@ LoadedCheerio {
           Node {
             "attribs": Object {
               "class": "table-body",
-              "style": "overflow: overlay; max-height: 100px;",
+              "style": "overflow: auto; max-height: 100px;",
             },
             "children": Array [
               Node {
@@ -9793,7 +9793,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -9851,7 +9851,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -9918,7 +9918,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -10051,7 +10051,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -10109,7 +10109,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -10176,7 +10176,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -11152,7 +11152,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -11210,7 +11210,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -11277,7 +11277,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -11410,7 +11410,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -11468,7 +11468,7 @@ LoadedCheerio {
                             "next": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -11535,7 +11535,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -12286,7 +12286,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -12352,7 +12352,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -12419,7 +12419,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -12570,7 +12570,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -12636,7 +12636,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -12703,7 +12703,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot
index 49f24ce04..3c1b19a58 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot
@@ -9,13 +9,13 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
             "attribs": Object {
               "class": "table-content",
-              "style": "overflow: overlay; overflow-y: hidden;",
+              "style": "overflow: auto; overflow-y: hidden;",
             },
             "children": Array [
               Node {
@@ -209,7 +209,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -275,7 +275,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -342,7 +342,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -1497,7 +1497,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -1563,7 +1563,7 @@ LoadedCheerio {
                             "next": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -1630,7 +1630,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -3925,7 +3925,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -3991,7 +3991,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4058,7 +4058,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -4480,7 +4480,7 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
@@ -4541,7 +4541,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -4607,7 +4607,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4674,7 +4674,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -4825,7 +4825,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4891,7 +4891,7 @@ LoadedCheerio {
                             "next": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -4958,7 +4958,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -5092,7 +5092,7 @@ LoadedCheerio {
             "next": Node {
               "attribs": Object {
                 "class": "table-body",
-                "style": "overflow: overlay; max-height: 100px;",
+                "style": "overflow: auto; max-height: 100px;",
               },
               "children": Array [
                 Node {
@@ -7455,7 +7455,7 @@ LoadedCheerio {
           Node {
             "attribs": Object {
               "class": "table-body",
-              "style": "overflow: overlay; max-height: 100px;",
+              "style": "overflow: auto; max-height: 100px;",
             },
             "children": Array [
               Node {
@@ -9850,7 +9850,7 @@ LoadedCheerio {
                                   "next": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -9916,7 +9916,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -9983,7 +9983,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -10134,7 +10134,7 @@ LoadedCheerio {
                                 "next": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -10200,7 +10200,7 @@ LoadedCheerio {
                               "next": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -10267,7 +10267,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot
index bacca5ba5..69bedf385 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot
@@ -9,13 +9,13 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
             "attribs": Object {
               "class": "table-content",
-              "style": "overflow: overlay; overflow-y: hidden;",
+              "style": "overflow: auto; overflow-y: hidden;",
             },
             "children": Array [
               Node {
@@ -178,7 +178,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -305,7 +305,7 @@ LoadedCheerio {
                               "prev": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -377,7 +377,7 @@ LoadedCheerio {
                                 "prev": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -857,7 +857,7 @@ LoadedCheerio {
                                 Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -968,7 +968,7 @@ LoadedCheerio {
                                   "prev": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -1032,7 +1032,7 @@ LoadedCheerio {
                                     "prev": Node {
                                       "attribs": Object {
                                         "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                        "style": "position: sticky; right: 0px;",
+                                        "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                       },
                                       "children": Array [
                                         Node {
@@ -1115,7 +1115,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -1226,7 +1226,7 @@ LoadedCheerio {
                                 "prev": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -1290,7 +1290,7 @@ LoadedCheerio {
                                   "prev": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -1814,7 +1814,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -1941,7 +1941,7 @@ LoadedCheerio {
                             "prev": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -2013,7 +2013,7 @@ LoadedCheerio {
                               "prev": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -2493,7 +2493,7 @@ LoadedCheerio {
                               Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -2604,7 +2604,7 @@ LoadedCheerio {
                                 "prev": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -2668,7 +2668,7 @@ LoadedCheerio {
                                   "prev": Node {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -2751,7 +2751,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -2862,7 +2862,7 @@ LoadedCheerio {
                               "prev": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -2926,7 +2926,7 @@ LoadedCheerio {
                                 "prev": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -4006,7 +4006,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -4117,7 +4117,7 @@ LoadedCheerio {
                               "prev": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4181,7 +4181,7 @@ LoadedCheerio {
                                 "prev": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -4264,7 +4264,7 @@ LoadedCheerio {
                           Node {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -4375,7 +4375,7 @@ LoadedCheerio {
                             "prev": Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -4439,7 +4439,7 @@ LoadedCheerio {
                               "prev": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4938,7 +4938,7 @@ LoadedCheerio {
                             Node {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -5065,7 +5065,7 @@ LoadedCheerio {
                               "prev": Node {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -5137,7 +5137,7 @@ LoadedCheerio {
                                 "prev": Node {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-last",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot
index 7b0d65a80..f81c5fed5 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot
@@ -9,7 +9,7 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
@@ -76,7 +76,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-header-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -150,7 +150,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-header-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -225,7 +225,7 @@ LoadedCheerio {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                 "name": "my-header-cell",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -396,7 +396,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-header-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -470,7 +470,7 @@ LoadedCheerio {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                 "name": "my-header-cell",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -545,7 +545,7 @@ LoadedCheerio {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                               "name": "my-header-cell",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -693,7 +693,7 @@ LoadedCheerio {
             "next": Node {
               "attribs": Object {
                 "class": "table-body",
-                "style": "overflow: overlay; max-height: 100px;",
+                "style": "overflow: auto; max-height: 100px;",
               },
               "children": Array [
                 Node {
@@ -1166,7 +1166,7 @@ LoadedCheerio {
                                       "attribs": Object {
                                         "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                         "name": "my-body-cell",
-                                        "style": "position: sticky; right: 0px;",
+                                        "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                       },
                                       "children": Array [
                                         Node {
@@ -1240,7 +1240,7 @@ LoadedCheerio {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                       "name": "my-body-cell",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -1315,7 +1315,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-body-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -1478,7 +1478,7 @@ LoadedCheerio {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                       "name": "my-body-cell",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -1552,7 +1552,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-body-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -1627,7 +1627,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-body-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -2636,7 +2636,7 @@ LoadedCheerio {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                       "name": "my-body-cell",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -2710,7 +2710,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-body-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -2785,7 +2785,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-body-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -2948,7 +2948,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-body-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -3022,7 +3022,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-body-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -3097,7 +3097,7 @@ LoadedCheerio {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                 "name": "my-body-cell",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -3699,7 +3699,7 @@ LoadedCheerio {
           Node {
             "attribs": Object {
               "class": "table-body",
-              "style": "overflow: overlay; max-height: 100px;",
+              "style": "overflow: auto; max-height: 100px;",
             },
             "children": Array [
               Node {
@@ -4172,7 +4172,7 @@ LoadedCheerio {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                       "name": "my-body-cell",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -4246,7 +4246,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-body-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -4321,7 +4321,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-body-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4484,7 +4484,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-body-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -4558,7 +4558,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-body-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -4633,7 +4633,7 @@ LoadedCheerio {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                 "name": "my-body-cell",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -5642,7 +5642,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-body-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -5716,7 +5716,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-body-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -5791,7 +5791,7 @@ LoadedCheerio {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                 "name": "my-body-cell",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -5954,7 +5954,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-body-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -6028,7 +6028,7 @@ LoadedCheerio {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                 "name": "my-body-cell",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
@@ -6103,7 +6103,7 @@ LoadedCheerio {
                             "attribs": Object {
                               "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                               "name": "my-body-cell",
-                              "style": "position: sticky; right: 0px;",
+                              "style": "position: sticky; right: 0px; border-right-color: transparent;",
                             },
                             "children": Array [
                               Node {
@@ -6743,7 +6743,7 @@ LoadedCheerio {
                                     "attribs": Object {
                                       "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                       "name": "my-header-cell",
-                                      "style": "position: sticky; right: 0px;",
+                                      "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                     },
                                     "children": Array [
                                       Node {
@@ -6817,7 +6817,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-header-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -6892,7 +6892,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-header-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -7063,7 +7063,7 @@ LoadedCheerio {
                                   "attribs": Object {
                                     "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                     "name": "my-header-cell",
-                                    "style": "position: sticky; right: 0px;",
+                                    "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                   },
                                   "children": Array [
                                     Node {
@@ -7137,7 +7137,7 @@ LoadedCheerio {
                                 "attribs": Object {
                                   "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                   "name": "my-header-cell",
-                                  "style": "position: sticky; right: 0px;",
+                                  "style": "position: sticky; right: 0px; border-right-color: transparent;",
                                 },
                                 "children": Array [
                                   Node {
@@ -7212,7 +7212,7 @@ LoadedCheerio {
                               "attribs": Object {
                                 "class": "table-cell table-cell-fix-right table-cell-fix-right-first",
                                 "name": "my-header-cell",
-                                "style": "position: sticky; right: 0px;",
+                                "style": "position: sticky; right: 0px; border-right-color: transparent;",
                               },
                               "children": Array [
                                 Node {
diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot
index 5ffa940c0..e8cec0789 100644
--- a/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot
+++ b/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot
@@ -9,7 +9,7 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "table-container",
+          "class": "table-container table-container-horizontally-scrollable",
         },
         "children": Array [
           Node {
diff --git a/src/components/Table/Internal/octable.module.scss b/src/components/Table/Internal/octable.module.scss
index e7e98e82b..0e280c32a 100644
--- a/src/components/Table/Internal/octable.module.scss
+++ b/src/components/Table/Internal/octable.module.scss
@@ -1,4 +1,4 @@
-@mixin scrollBars() {
+@mixin scroll-bars() {
   -ms-overflow-style: none;
 
   &::-webkit-scrollbar {
@@ -7,12 +7,19 @@
     width: $space-m;
   }
 
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+
   &::-webkit-scrollbar-corner {
     background-color: transparent;
   }
 
   &::-webkit-scrollbar-thumb {
     background-color: transparent;
+    border: 5px solid transparent;
+    border-radius: $border-radius-xl;
+    box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
   }
 
   &::-webkit-scrollbar-track {
@@ -20,78 +27,8 @@
     background-color: transparent;
   }
 
-  @supports (overflow: overlay) {
-    overflow: overlay;
-
-    &:focus-within,
-    &:focus-visible,
-    &:hover,
-    &:hover:focus {
-      &::-webkit-scrollbar {
-        display: block;
-        height: $space-m;
-        width: $space-m;
-      }
-
-      &::-webkit-scrollbar-button {
-        display: none;
-      }
-
-      &::-webkit-scrollbar-corner {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: transparent;
-        border: 5px solid transparent;
-        border-radius: $border-radius-xl;
-        box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
-      }
-    }
-  }
-
-  @supports not (overflow: overlay) {
-    overflow: auto;
-
-    &:focus-within,
-    &:focus-visible,
-    &:hover,
-    &:hover:focus {
-      -ms-overflow-style: none;
-      scrollbar-width: thin;
-
-      &::-webkit-scrollbar {
-        background-color: var(--table-background-color);
-        height: $space-m;
-        width: $space-m;
-      }
-
-      &::-webkit-scrollbar-corner {
-        background-color: var(--table-background-color);
-        border: 1px solid var(--table-background-color);
-        border-bottom-right-radius: $table-border-radius;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: transparent;
-        border: 5px solid transparent;
-        border-radius: $border-radius-xl;
-        box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
-      }
-
-      &::-webkit-scrollbar-track {
-        -webkit-box-shadow: none;
-        background-color: var(--table-background-color);
-      }
-    }
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
   }
 }
 
@@ -339,16 +276,29 @@
 
   &-container {
     color: var(--table-foreground-color);
+
+    &.table-container-horizontally-scrollable {
+      tbody tr:last-of-type {
+        td {
+          &:first-of-type {
+            border-bottom-left-radius: 0;
+          }
+          &:last-of-type {
+            border-bottom-right-radius: 0;
+          }
+        }
+      }
+    }
   }
 
   &-content {
-    @include scrollBars();
+    @include scroll-bars();
 
     color: var(--table-foreground-color);
   }
 
   &-body {
-    @include scrollBars();
+    @include scroll-bars();
 
     border-bottom-left-radius: $table-border-radius;
     border-bottom-right-radius: $table-border-radius;
diff --git a/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot b/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot
index a6a283b1c..f1047e364 100644
--- a/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot
+++ b/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot
@@ -14,13 +14,13 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "class": "table-container",
+              "class": "table-container table-container-horizontally-scrollable",
             },
             "children": Array [
               Node {
                 "attribs": Object {
                   "class": "table-content",
-                  "style": "overflow: overlay; overflow-y: hidden;",
+                  "style": "overflow: auto; overflow-y: hidden;",
                 },
                 "children": Array [
                   Node {
diff --git a/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot b/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot
index 2d8893afc..5b7b25b59 100644
--- a/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot
+++ b/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot
@@ -14,13 +14,13 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "class": "table-container",
+              "class": "table-container table-container-horizontally-scrollable",
             },
             "children": Array [
               Node {
                 "attribs": Object {
                   "class": "table-content",
-                  "style": "overflow: overlay; overflow-y: hidden;",
+                  "style": "overflow: auto; overflow-y: hidden;",
                 },
                 "children": Array [
                   Node {
diff --git a/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot b/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot
index 2933a022e..bdf8c0734 100644
--- a/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot
+++ b/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot
@@ -14,13 +14,13 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "class": "table-container",
+              "class": "table-container table-container-horizontally-scrollable",
             },
             "children": Array [
               Node {
                 "attribs": Object {
                   "class": "table-content",
-                  "style": "overflow: overlay; overflow-y: hidden;",
+                  "style": "overflow: auto; overflow-y: hidden;",
                 },
                 "children": Array [
                   Node {
diff --git a/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot b/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot
index 69573475e..22e4c0869 100644
--- a/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot
+++ b/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot
@@ -14,13 +14,13 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "class": "table-container",
+              "class": "table-container table-container-horizontally-scrollable",
             },
             "children": Array [
               Node {
                 "attribs": Object {
                   "class": "table-content",
-                  "style": "overflow:overlay;overflow-y:hidden",
+                  "style": "overflow:auto;overflow-y:hidden",
                 },
                 "children": Array [
                   Node {