diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx index 75097569fbd..2133c02c36b 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx @@ -166,7 +166,7 @@ function StickyWrap({ const scrollBodyRef = useRef(null); // main body const scrollBarSize = getScrollBarSize(); - const { bodyHeight, columnWidths } = sticky; + const { bodyHeight, columnWidths, hasVerticalScroll } = sticky; const needSizer = !columnWidths || sticky.width !== maxWidth || @@ -283,13 +283,18 @@ function StickyWrap({ ); + const headerContainerWidth = hasVerticalScroll + ? maxWidth - scrollBarSize + : maxWidth; + headerTable = (
@@ -309,7 +314,8 @@ function StickyWrap({ ref={scrollFooterRef} style={{ overflow: 'hidden', - scrollbarGutter: 'stable', + width: headerContainerWidth, + boxSizing: 'border-box', }} role="presentation" > @@ -339,6 +345,8 @@ function StickyWrap({ height: bodyHeight, overflow: 'auto', scrollbarGutter: 'stable', + width: maxWidth, + boxSizing: 'border-box', }} css={scrollBarStyles} onScroll={sticky.hasHorizontalScroll ? onScroll : undefined}