diff --git a/webview/src/experiments/components/table/Cell.tsx b/webview/src/experiments/components/table/Cell.tsx
index 89726949c3..ef5cbf9623 100644
--- a/webview/src/experiments/components/table/Cell.tsx
+++ b/webview/src/experiments/components/table/Cell.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
-import { useInView } from 'react-intersection-observer'
 import cx from 'classnames'
 import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'
 import { Indicator, IndicatorWithJustTheCounter } from './Indicators'
 import styles from './styles.module.scss'
-import { CellProp, WithTableRoot, RowProp } from './interfaces'
+import { CellProp, RowProp } from './interfaces'
 import ClockIcon from '../../../shared/components/icons/Clock'
 import { clickAndEnterProps } from '../../../util/props'
 import { StarFull, StarEmpty } from '../../../shared/components/icons'
@@ -130,38 +129,27 @@ export const RowActions: React.FC<RowActionsProps> = ({
 
 export const FirstCell: React.FC<
   CellProp &
-    RowActionsProps &
-    WithTableRoot & {
+    RowActionsProps & {
       bulletColor?: string
       toggleExperiment: () => void
-      isRowSelected: boolean
-      toggleRowSelection: () => void
-      toggleStarred: () => void
     }
-> = ({ cell, bulletColor, toggleExperiment, root, ...rowActionsProps }) => {
+> = ({ cell, bulletColor, toggleExperiment, ...rowActionsProps }) => {
   const { row, isPlaceholder } = cell
   const {
     original: { queued }
   } = row
+
   const {
     subRowStates: { plotSelections }
   } = rowActionsProps
 
-  const [ref, needsShadow] = useInView({
-    root,
-    rootMargin: '0px 0px 0px -15px',
-    threshold: 1
-  })
-
   return (
     <div
-      ref={ref}
       {...cell.getCellProps({
         className: cx(
           styles.td,
           styles.experimentCell,
-          isPlaceholder && styles.groupPlaceholder,
-          needsShadow && styles.withExpCellShadow
+          isPlaceholder && styles.groupPlaceholder
         )
       })}
     >
diff --git a/webview/src/experiments/components/table/MergeHeaderGroups.tsx b/webview/src/experiments/components/table/MergeHeaderGroups.tsx
index 82ae2dd457..de16956044 100644
--- a/webview/src/experiments/components/table/MergeHeaderGroups.tsx
+++ b/webview/src/experiments/components/table/MergeHeaderGroups.tsx
@@ -5,25 +5,25 @@ import { Experiment, Column } from 'dvc/src/experiments/webview/contract'
 import { HeaderGroup } from 'react-table'
 import { TableHeader } from './TableHeader'
 import styles from './styles.module.scss'
-import { WithTableRoot } from './interfaces'
 import {
   OnDragOver,
   OnDragStart,
   OnDrop
 } from '../../../shared/components/dragDrop/DragDropWorkbench'
 
-export const MergedHeaderGroups: React.FC<
-  {
-    headerGroup: HeaderGroup<Experiment>
-    columns: HeaderGroup<Experiment>[]
-    sorts: SortDefinition[]
-    filters: string[]
-    orderedColumns: Column[]
-    onDragUpdate: OnDragOver
-    onDragStart: OnDragStart
-    onDragEnd: OnDrop
-  } & WithTableRoot
-> = ({
+export const MergedHeaderGroups: React.FC<{
+  headerGroup: HeaderGroup<Experiment>
+  columns: HeaderGroup<Experiment>[]
+  sorts: SortDefinition[]
+  filters: string[]
+  orderedColumns: Column[]
+  onDragUpdate: OnDragOver
+  onDragStart: OnDragStart
+  onDragEnd: OnDrop
+  isFirst: boolean
+  setExpColumnNeedsShadow: (needsShadow: boolean) => void
+  root: HTMLElement | null
+}> = ({
   headerGroup,
   sorts,
   filters,
@@ -32,7 +32,9 @@ export const MergedHeaderGroups: React.FC<
   onDragUpdate,
   onDragEnd,
   onDragStart,
-  root
+  root,
+  isFirst,
+  setExpColumnNeedsShadow
 }) => {
   return (
     <div
@@ -42,7 +44,8 @@ export const MergedHeaderGroups: React.FC<
     >
       {headerGroup.headers.map((column: HeaderGroup<Experiment>, ind) => (
         <TableHeader
-          isFirst={ind === 0}
+          isFirst={isFirst && ind === 0}
+          setExpColumnNeedsShadow={setExpColumnNeedsShadow}
           key={column.id}
           orderedColumns={orderedColumns}
           column={column}
diff --git a/webview/src/experiments/components/table/Row.tsx b/webview/src/experiments/components/table/Row.tsx
index 94afd110a1..666fdd28b8 100644
--- a/webview/src/experiments/components/table/Row.tsx
+++ b/webview/src/experiments/components/table/Row.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import cx from 'classnames'
 import { Experiment } from 'dvc/src/experiments/webview/contract'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
-import { RowProp, WithChanges, WithTableRoot } from './interfaces'
+import { RowProp, WithChanges } from './interfaces'
 import styles from './styles.module.scss'
 import { FirstCell, CellWrapper } from './Cell'
 import { RowSelectionContext } from './RowSelectionContext'
@@ -307,9 +307,7 @@ export type BatchSelectionProp = {
 }
 
 export const RowContent: React.FC<
-  RowProp & { className?: string } & WithChanges &
-    BatchSelectionProp &
-    WithTableRoot
+  RowProp & { className?: string } & WithChanges & BatchSelectionProp
 > = ({
   row,
   className,
@@ -317,8 +315,7 @@ export const RowContent: React.FC<
   contextMenuDisabled,
   projectHasCheckpoints,
   hasRunningExperiment,
-  batchRowSelection,
-  root
+  batchRowSelection
 }): JSX.Element => {
   const {
     getRowProps,
@@ -409,7 +406,6 @@ export const RowContent: React.FC<
         data-testid={isWorkspace && 'workspace-row'}
       >
         <FirstCell
-          root={root}
           cell={firstCell}
           bulletColor={displayColor}
           starred={starred}
diff --git a/webview/src/experiments/components/table/Table.tsx b/webview/src/experiments/components/table/Table.tsx
index ca8012912b..bcaea09426 100644
--- a/webview/src/experiments/components/table/Table.tsx
+++ b/webview/src/experiments/components/table/Table.tsx
@@ -1,33 +1,25 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import cx from 'classnames'
 import styles from './styles.module.scss'
 import { TableHead } from './TableHead'
 import { BatchSelectionProp, RowContent } from './Row'
-import {
-  InstanceProp,
-  RowProp,
-  TableProps,
-  WithChanges,
-  WithTableRoot
-} from './interfaces'
+import { InstanceProp, RowProp, TableProps, WithChanges } from './interfaces'
 import { RowSelectionContext } from './RowSelectionContext'
 import { useClickOutside } from '../../../shared/hooks/useClickOutside'
 
 export const NestedRow: React.FC<
-  RowProp & InstanceProp & BatchSelectionProp & WithTableRoot
+  RowProp & InstanceProp & BatchSelectionProp
 > = ({
   row,
   instance,
   contextMenuDisabled,
   projectHasCheckpoints,
   hasRunningExperiment,
-  batchRowSelection,
-  root
+  batchRowSelection
 }) => {
   instance.prepareRow(row)
   return (
     <RowContent
-      root={root}
       row={row}
       className={styles.nestedRow}
       contextMenuDisabled={contextMenuDisabled}
@@ -39,15 +31,14 @@ export const NestedRow: React.FC<
 }
 
 export const ExperimentGroup: React.FC<
-  RowProp & InstanceProp & BatchSelectionProp & WithTableRoot
+  RowProp & InstanceProp & BatchSelectionProp
 > = ({
   row,
   instance,
   contextMenuDisabled,
   projectHasCheckpoints,
   hasRunningExperiment,
-  batchRowSelection,
-  root
+  batchRowSelection
 }) => {
   instance.prepareRow(row)
   return (
@@ -58,7 +49,6 @@ export const ExperimentGroup: React.FC<
       )}
     >
       <NestedRow
-        root={root}
         row={row}
         instance={instance}
         contextMenuDisabled={contextMenuDisabled}
@@ -69,7 +59,6 @@ export const ExperimentGroup: React.FC<
       {row.isExpanded &&
         row.subRows.map(row => (
           <NestedRow
-            root={root}
             row={row}
             instance={instance}
             key={row.id}
@@ -84,7 +73,7 @@ export const ExperimentGroup: React.FC<
 }
 
 export const TableBody: React.FC<
-  RowProp & InstanceProp & WithChanges & BatchSelectionProp & WithTableRoot
+  RowProp & InstanceProp & WithChanges & BatchSelectionProp
 > = ({
   row,
   instance,
@@ -92,8 +81,7 @@ export const TableBody: React.FC<
   contextMenuDisabled,
   projectHasCheckpoints,
   hasRunningExperiment,
-  batchRowSelection,
-  root
+  batchRowSelection
 }) => {
   instance.prepareRow(row)
   return (
@@ -109,7 +97,6 @@ export const TableBody: React.FC<
       })}
     >
       <RowContent
-        root={root}
         row={row}
         projectHasCheckpoints={projectHasCheckpoints}
         hasRunningExperiment={hasRunningExperiment}
@@ -120,7 +107,6 @@ export const TableBody: React.FC<
       {row.isExpanded &&
         row.subRows.map(subRow => (
           <ExperimentGroup
-            root={root}
             row={subRow}
             instance={instance}
             key={subRow.values.id}
@@ -151,6 +137,7 @@ export const Table: React.FC<TableProps & WithChanges> = ({
 
   const { clearSelectedRows, batchSelection, lastSelectedRow } =
     React.useContext(RowSelectionContext)
+  const [expColumnNeedsShadow, setExpColumnNeedsShadow] = useState(false)
 
   const tableRef = useRef<HTMLDivElement>(null)
 
@@ -192,7 +179,12 @@ export const Table: React.FC<TableProps & WithChanges> = ({
   return (
     <div className={styles.tableContainer}>
       <div
-        {...getTableProps({ className: styles.table })}
+        {...getTableProps({
+          className: cx(
+            styles.table,
+            expColumnNeedsShadow && styles.withExpColumnShadow
+          )
+        })}
         ref={tableRef}
         tabIndex={0}
         role="tree"
@@ -209,6 +201,7 @@ export const Table: React.FC<TableProps & WithChanges> = ({
           filters={filters}
           columns={columns}
           root={tableRef.current}
+          setExpColumnNeedsShadow={setExpColumnNeedsShadow}
         />
         {rows.map(row => (
           <TableBody
@@ -219,7 +212,6 @@ export const Table: React.FC<TableProps & WithChanges> = ({
             hasRunningExperiment={hasRunningExperiment}
             projectHasCheckpoints={hasCheckpoints}
             batchRowSelection={batchRowSelection}
-            root={tableRef.current}
           />
         ))}
       </div>
diff --git a/webview/src/experiments/components/table/TableHead.tsx b/webview/src/experiments/components/table/TableHead.tsx
index 27f8c8c70a..a5542012fd 100644
--- a/webview/src/experiments/components/table/TableHead.tsx
+++ b/webview/src/experiments/components/table/TableHead.tsx
@@ -24,6 +24,7 @@ interface TableHeadProps {
   filteredCounts: FilteredCounts
   filters: string[]
   root: HTMLElement | null
+  setExpColumnNeedsShadow: (needsShadow: boolean) => void
 }
 
 export const TableHead = ({
@@ -37,7 +38,8 @@ export const TableHead = ({
   filteredCounts,
   filters,
   columns,
-  sorts
+  sorts,
+  setExpColumnNeedsShadow
 }: TableHeadProps) => {
   const orderedColumns = useColumnOrder(columns, columnOrder)
   const allHeaders: HeaderGroup<Experiment>[] = []
@@ -105,7 +107,7 @@ export const TableHead = ({
         filters={filters}
         filteredCounts={filteredCounts}
       />
-      {headerGroups.map(headerGroup => (
+      {headerGroups.map((headerGroup, ind) => (
         // eslint-disable-next-line react/jsx-key
         <MergedHeaderGroups
           {...headerGroup.getHeaderGroupProps()}
@@ -118,6 +120,8 @@ export const TableHead = ({
           onDragUpdate={onDragUpdate}
           onDragEnd={onDragEnd}
           root={root}
+          isFirst={ind === 0}
+          setExpColumnNeedsShadow={setExpColumnNeedsShadow}
         />
       ))}
     </div>
diff --git a/webview/src/experiments/components/table/TableHeader.tsx b/webview/src/experiments/components/table/TableHeader.tsx
index 9482240604..8b730cba0b 100644
--- a/webview/src/experiments/components/table/TableHeader.tsx
+++ b/webview/src/experiments/components/table/TableHeader.tsx
@@ -4,14 +4,13 @@ import {
   Column,
   ColumnType
 } from 'dvc/src/experiments/webview/contract'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { HeaderGroup } from 'react-table'
 import cx from 'classnames'
 import { useInView } from 'react-intersection-observer'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { VSCodeDivider } from '@vscode/webview-ui-toolkit/react'
 import styles from './styles.module.scss'
-import { WithTableRoot } from './interfaces'
 import { countUpperLevels, isFirstLevelHeader } from '../../util/columns'
 import { ContextMenu } from '../../../shared/components/contextMenu/ContextMenu'
 import {
@@ -131,30 +130,22 @@ const getIconMenuItems = (
   }
 ]
 
-const FirstTableHeaderCellWrapper: React.FC<
-  {
-    cellProps: React.HTMLAttributes<HTMLDivElement>
-    children: React.ReactNode
-  } & WithTableRoot
-> = ({ root, cellProps, children }) => {
+const FirstTableHeaderCellWrapper: React.FC<{
+  children: React.ReactNode
+  setExpColumnNeedsShadow: (needsShadow: boolean) => void
+  root: HTMLElement | null
+}> = ({ root, setExpColumnNeedsShadow, children }) => {
   const [ref, needsShadow] = useInView({
     root,
     rootMargin: '0px 0px 0px -15px',
     threshold: 1
   })
 
-  return (
-    <div
-      {...cellProps}
-      ref={ref}
-      className={cx(
-        cellProps.className,
-        needsShadow && styles.withExpCellShadow
-      )}
-    >
-      {children}
-    </div>
-  )
+  useEffect(() => {
+    setExpColumnNeedsShadow(needsShadow)
+  }, [needsShadow, setExpColumnNeedsShadow])
+
+  return <div ref={ref}>{children}</div>
 }
 
 const TableHeaderCellContents: React.FC<{
@@ -209,22 +200,22 @@ const TableHeaderCellContents: React.FC<{
   )
 }
 
-const TableHeaderCell: React.FC<
-  {
-    column: HeaderGroup<Experiment>
-    columns: HeaderGroup<Experiment>[]
-    hasFilter: boolean
-    orderedColumns: Column[]
-    sortOrder: SortOrder
-    sortEnabled: boolean
-    menuDisabled?: boolean
-    menuContent?: React.ReactNode
-    onDragOver: OnDragOver
-    onDragStart: OnDragStart
-    onDrop: OnDrop
-    isFirst: boolean
-  } & WithTableRoot
-> = ({
+const TableHeaderCell: React.FC<{
+  column: HeaderGroup<Experiment>
+  columns: HeaderGroup<Experiment>[]
+  hasFilter: boolean
+  orderedColumns: Column[]
+  sortOrder: SortOrder
+  sortEnabled: boolean
+  menuDisabled?: boolean
+  menuContent?: React.ReactNode
+  onDragOver: OnDragOver
+  onDragStart: OnDragStart
+  onDrop: OnDrop
+  isFirst: boolean
+  setExpColumnNeedsShadow: (needsShadow: boolean) => void
+  root: HTMLElement | null
+}> = ({
   column,
   columns,
   orderedColumns,
@@ -237,7 +228,8 @@ const TableHeaderCell: React.FC<
   onDragStart,
   onDrop,
   root,
-  isFirst
+  isFirst,
+  setExpColumnNeedsShadow
 }) => {
   const [menuSuppressed, setMenuSuppressed] = React.useState<boolean>(false)
   const isDraggable =
@@ -252,16 +244,6 @@ const TableHeaderCell: React.FC<
     columns
   )
 
-  const cellProps = {
-    ...column.getHeaderProps(
-      getHeaderPropsArgs(column, sortEnabled, sortOrder)
-    ),
-    'data-testid': `header-${column.id}`,
-    key: column.id,
-    role: 'columnheader',
-    tabIndex: 0
-  }
-
   const cellContents = (
     <TableHeaderCellContents
       column={column}
@@ -285,13 +267,26 @@ const TableHeaderCell: React.FC<
       disabled={menuDisabled || menuSuppressed}
       trigger={'contextmenu click'}
     >
-      {isFirst ? (
-        <FirstTableHeaderCellWrapper cellProps={cellProps} root={root}>
-          {cellContents}
-        </FirstTableHeaderCellWrapper>
-      ) : (
-        <div {...cellProps}>{cellContents}</div>
-      )}
+      <div
+        {...column.getHeaderProps(
+          getHeaderPropsArgs(column, sortEnabled, sortOrder)
+        )}
+        data-testid={`header-${column.id}`}
+        key={column.id}
+        role="columnheader"
+        tabIndex={0}
+      >
+        {isFirst ? (
+          <FirstTableHeaderCellWrapper
+            setExpColumnNeedsShadow={setExpColumnNeedsShadow}
+            root={root}
+          >
+            {cellContents}
+          </FirstTableHeaderCellWrapper>
+        ) : (
+          cellContents
+        )}
+      </div>
     </ContextMenu>
   )
 }
@@ -306,9 +301,11 @@ interface TableHeaderProps {
   onDragStart: OnDragStart
   onDrop: OnDrop
   isFirst: boolean
+  setExpColumnNeedsShadow: (needsShadow: boolean) => void
+  root: HTMLElement | null
 }
 
-export const TableHeader: React.FC<TableHeaderProps & WithTableRoot> = ({
+export const TableHeader: React.FC<TableHeaderProps> = ({
   column,
   columns,
   filters,
@@ -318,7 +315,8 @@ export const TableHeader: React.FC<TableHeaderProps & WithTableRoot> = ({
   onDragStart,
   onDrop,
   root,
-  isFirst
+  isFirst,
+  setExpColumnNeedsShadow
 }) => {
   const baseColumn = column.placeholderOf || column
   const sort = sorts.find(sort => sort.path === baseColumn.id)
@@ -370,6 +368,7 @@ export const TableHeader: React.FC<TableHeaderProps & WithTableRoot> = ({
       menuDisabled={!isSortable && column.group !== ColumnType.PARAMS}
       root={root}
       isFirst={isFirst}
+      setExpColumnNeedsShadow={setExpColumnNeedsShadow}
       menuContent={
         <div>
           <MessagesMenu options={contextMenuOptions} />
diff --git a/webview/src/experiments/components/table/interfaces.ts b/webview/src/experiments/components/table/interfaces.ts
index 8712c9326b..8dc2626d3e 100644
--- a/webview/src/experiments/components/table/interfaces.ts
+++ b/webview/src/experiments/components/table/interfaces.ts
@@ -13,10 +13,6 @@ export interface WithChanges {
   changes?: string[]
 }
 
-export interface WithTableRoot {
-  root: HTMLElement | null
-}
-
 export interface RowProp {
   row: Row<Experiment>
   contextMenuDisabled?: boolean
diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
index 782ff3b07d..b95620f6f4 100644
--- a/webview/src/experiments/components/table/styles.module.scss
+++ b/webview/src/experiments/components/table/styles.module.scss
@@ -8,7 +8,6 @@ $row-border: 1px solid $border-color;
 $edge-padding: 0.8rem;
 $cell-padding: 0.5rem;
 $workspace-row-edge-margin: $edge-padding - $cell-padding;
-$exp-cell-shadow: 3px 0px 0px var(--vscode-widget-shadow);
 
 // Extendable Silent Rules
 %expandableRowArrow {
@@ -283,6 +282,14 @@ $exp-cell-shadow: 3px 0px 0px var(--vscode-widget-shadow);
     }
   }
 
+  .table.withExpColumnShadow {
+    .tr:not(.rowSelected) {
+      & > *:first-child {
+        box-shadow: 3px 0px 0px var(--vscode-widget-shadow);
+      }
+    }
+  }
+
   .bodyRow {
     &:not(.rowSelected) {
       & > *:first-child {
@@ -419,15 +426,9 @@ $exp-cell-shadow: 3px 0px 0px var(--vscode-widget-shadow);
     min-width: 0;
     position: relative;
   }
-
   .th {
     height: auto;
-
-    &.withExpCellShadow {
-      box-shadow: $exp-cell-shadow;
-    }
   }
-
   .td {
     height: auto;
     font-size: 0.8rem;
@@ -449,11 +450,6 @@ $exp-cell-shadow: 3px 0px 0px var(--vscode-widget-shadow);
     display: flex;
     flex-flow: row nowrap;
     text-align: left;
-
-    &.withExpCellShadow {
-      box-shadow: $exp-cell-shadow;
-    }
-
     .innerCell {
       justify-content: flex-start;