diff --git a/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx b/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx
index 6110521eb3..91d58d1103 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx
@@ -3,7 +3,6 @@ import { debounce } from 'lodash';
 
 import MesaTooltip from './MesaTooltip';
 import Events from '../Utils/Events';
-import { MESA_SCROLL_EVENT, MESA_REFLOW_EVENT } from '../Ui/MesaContants';
 
 class AnchoredTooltip extends React.Component {
   constructor(props) {
@@ -19,8 +18,6 @@ class AnchoredTooltip extends React.Component {
     this.listeners = {
       scroll: Events.add('scroll', this.updatePosition),
       resize: Events.add('resize', this.updatePosition),
-      MesaScroll: Events.add(MESA_SCROLL_EVENT, this.updatePosition),
-      MesaReflow: Events.add(MESA_REFLOW_EVENT, this.updatePosition),
     };
   }
 
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx
index 799682ad59..919c0e2378 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx
@@ -7,22 +7,19 @@ import { defaultMemoize } from 'reselect';
 import HeadingRow from './HeadingRow';
 import DataRowList from './DataRowList';
 import { makeClassifier, combineWidths } from '../Utils/Utils';
-import { MESA_SCROLL_EVENT, MESA_REFLOW_EVENT } from './MesaContants';
 
 const dataTableClass = makeClassifier('DataTable');
 
 class DataTable extends React.Component {
   constructor(props) {
     super(props);
-    this.widthCache = {};
-    this.state = { dynamicWidths: null, tableWrapperWidth: null };
+    this.widthCache = [];
     this.renderStickyTable = this.renderStickyTable.bind(this);
     this.componentDidMount = this.componentDidMount.bind(this);
-    this.getInnerCellWidth = this.getInnerCellWidth.bind(this);
     this.hasSelectionColumn = this.hasSelectionColumn.bind(this);
+    this.hasExpansionColumn = this.hasExpansionColumn.bind(this);
     this.shouldUseStickyHeader = this.shouldUseStickyHeader.bind(this);
     this.makeFirstNColumnsSticky = this.makeFirstNColumnsSticky.bind(this);
-    this.handleTableBodyScroll = this.handleTableBodyScroll.bind(this);
     this.setDynamicWidths = this.setDynamicWidths.bind(this);
     this.resizeId = -1;
     this.mainRef = null;
@@ -40,7 +37,7 @@ class DataTable extends React.Component {
   }
 
   makeFirstNColumnsSticky(columns, n) {
-    const { dynamicWidths } = this.state;
+    const dynamicWidths = this.widthCache;
 
     if (n <= columns.length) {
       const stickyColumns = columns.slice(0, n).map((column, index) => {
@@ -95,14 +92,16 @@ class DataTable extends React.Component {
   }
 
   attachLoadEventHandlers() {
-    if (this.bodyNode == null) return;
-    this.bodyNode.querySelectorAll('img, iframe, object').forEach((node) => {
-      if (node.complete) return;
-      node.addEventListener('load', (event) => {
-        const el = event.target.offsetParent || event.target;
-        if (el.scrollWidth > el.clientWidth) this.setDynamicWidths();
+    if (this.contentTable == null) return;
+    this.contentTable
+      .querySelectorAll('img, iframe, object')
+      .forEach((node) => {
+        if (node.complete) return;
+        node.addEventListener('load', (event) => {
+          const el = event.target.offsetParent || event.target;
+          if (el.scrollWidth > el.clientWidth) this.setDynamicWidths();
+        });
       });
-    });
   }
 
   attachResizeHandler() {
@@ -123,11 +122,9 @@ class DataTable extends React.Component {
     if (this.props.rows.length === 0 || this.props.filteredRows.length === 0)
       return;
 
-    this.setState({ dynamicWidths: null, tableWrapperWidth: null }, () => {
-      this.widthCache = {};
-      const { columns } = this.props;
-      const hasSelectionColumn = this.hasSelectionColumn();
-      const { contentTable, getInnerCellWidth } = this;
+    this.setState({ dynamicWidths: null }, () => {
+      this.widthCache = [];
+      const { contentTable } = this;
       if (!contentTable) return;
       const contentCells = Array.from(
         contentTable.querySelectorAll('tbody > tr:first-child > td')
@@ -137,26 +134,18 @@ class DataTable extends React.Component {
         return;
       }
 
-      if (hasSelectionColumn) {
-        contentCells.shift();
-      }
-
-      const dynamicWidths = columns.map(
-        (c, i) =>
-          getInnerCellWidth(contentCells[i], c) -
-          (hasSelectionColumn && !i ? 1 : 0)
+      this.widthCache = contentCells.map(
+        (cell) => cell.getBoundingClientRect().width
       );
-      this.setState({ dynamicWidths }, () => {
-        window.dispatchEvent(new CustomEvent(MESA_REFLOW_EVENT));
-        const tableWrapperWidth = this.bodyNode && this.bodyNode.clientWidth;
-        this.setState({ tableWrapperWidth });
-      });
     });
   }
 
-  getInnerCellWidth(cell, { key }) {
-    if (key && key in this.widthCache) return this.widthCache[key];
-    return (this.widthCache[key] = cell.clientWidth);
+  hasExpansionColumn() {
+    const { options, eventHandlers } = this.props;
+    return (
+      typeof options.childRow === 'function' &&
+      typeof eventHandlers.onExpandedRowsChange === 'function'
+    );
   }
 
   hasSelectionColumn() {
@@ -168,12 +157,6 @@ class DataTable extends React.Component {
     );
   }
 
-  handleTableBodyScroll() {
-    const offset = this.bodyNode.scrollLeft;
-    this.headerNode.scrollLeft = offset;
-    window.dispatchEvent(new CustomEvent(MESA_SCROLL_EVENT));
-  }
-
   // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 
   renderStickyTable() {
@@ -187,30 +170,15 @@ class DataTable extends React.Component {
       uiState,
       headerWrapperStyle,
     } = this.props;
-    const { dynamicWidths } = this.state;
-    const stickyColumns = options.useStickyFirstNColumns
+    const newColumns = options.useStickyFirstNColumns
       ? this.makeFirstNColumnsSticky(columns, options.useStickyFirstNColumns)
       : columns;
-    const newColumns =
-      stickyColumns.every(({ width }) => width) ||
-      !dynamicWidths ||
-      dynamicWidths.length == 0
-        ? stickyColumns
-        : makeColumnsWithDynamicWidths({
-            columns: stickyColumns,
-            dynamicWidths,
-          });
     const wrapperStyle = {
       maxHeight: options ? options.tableBodyMaxHeight : null,
-      minWidth: dynamicWidths
-        ? combineWidths(columns.map(({ width }) => width))
-        : null,
     };
-    const headerWrapperStyleMerged = {
-      display: dynamicWidths == null ? 'none' : 'block',
-      ...headerWrapperStyle,
+    const tableStyle = {
+      tableLayout: 'auto',
     };
-    const tableLayout = { tableLayout: dynamicWidths ? 'fixed' : 'auto' };
     const tableProps = {
       options,
       rows,
@@ -223,36 +191,21 @@ class DataTable extends React.Component {
     return (
       <div ref={(node) => (this.mainRef = node)} className="MesaComponent">
         <div
-          className={dataTableClass(
-            null,
-            options.useStickyHeader ? 'Sticky' : null
-          )}
+          className={dataTableClass(null, [
+            options.useStickyHeader ? 'Sticky' : undefined,
+            options.marginContent ? 'HasMargin' : undefined,
+          ])}
           style={wrapperStyle}
         >
-          <div
-            style={headerWrapperStyleMerged}
-            ref={(node) => (this.headerNode = node)}
-            className={dataTableClass('Header')}
-          >
-            <table cellSpacing={0} cellPadding={0} style={{ ...tableLayout }}>
-              <HeadingRow {...tableProps} />
-            </table>
-          </div>
-          <div
-            ref={(node) => (this.bodyNode = node)}
-            className={dataTableClass('Body')}
-            onScroll={this.handleTableBodyScroll}
+          <table
+            cellSpacing={0}
+            cellPadding={0}
+            style={tableStyle}
+            ref={(node) => (this.contentTable = node)}
           >
-            <table
-              cellSpacing={0}
-              cellPadding={0}
-              style={tableLayout}
-              ref={(node) => (this.contentTable = node)}
-            >
-              {dynamicWidths == null ? <HeadingRow {...tableProps} /> : null}
-              <DataRowList {...tableProps} />
-            </table>
-          </div>
+            <HeadingRow {...tableProps} />
+            <DataRowList {...tableProps} />
+          </table>
           {this.props.options.marginContent && (
             <div className={dataTableClass('Margin')}>
               {this.props.options.marginContent}
@@ -289,12 +242,4 @@ DataTable.propTypes = {
   eventHandlers: PropTypes.objectOf(PropTypes.func),
 };
 
-const makeColumnsWithDynamicWidths = defaultMemoize(
-  ({ columns, dynamicWidths }) =>
-    columns.map((column, index) =>
-      Object.assign({}, column, { width: dynamicWidths[index] })
-    ),
-  (a, b) => a.columns === b.columns && isEqual(a.dynamicWidths, b.dynamicWidths)
-);
-
 export default DataTable;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/ExpansionCell.tsx b/packages/libs/coreui/src/components/Mesa/Ui/ExpansionCell.tsx
index f17451497c..b95b90336e 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/ExpansionCell.tsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/ExpansionCell.tsx
@@ -42,21 +42,13 @@ export default function ExpansionCell({
     const title = 'Show or hide all row details';
 
     return (
-      <th className="wdk-DataTableCell wdk-DataTableCell__childRowToggle">
+      <th className="HeadingCell ChildRowToggle">
         {inert ? null : areAllRowsExpanded ? (
-          <button
-            className="wdk-DataTableCellExpand"
-            title={title}
-            onClick={handler}
-          >
+          <button title={title} onClick={handler}>
             <ArrowDown />
           </button>
         ) : (
-          <button
-            className="wdk-DataTableCellExpand"
-            title={title}
-            onClick={handler}
-          >
+          <button title={title} onClick={handler}>
             <ArrowRight />
           </button>
         )}
@@ -82,13 +74,13 @@ export default function ExpansionCell({
     };
 
     return (
-      <td className="wdk-DataTable wdk-DataTableCell__childRowToggle">
+      <td className="ChildRowToggle">
         {inert ? null : isExpanded ? (
-          <button className="wdk-DataTableCellExpand" onClick={handler}>
+          <button onClick={handler}>
             <ArrowDown />
           </button>
         ) : (
-          <button className="wdk-DataTableCellExpand" onClick={handler}>
+          <button onClick={handler}>
             <ArrowRight />
           </button>
         )}
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx
index 4a8c46b822..0bbc62c6c4 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx
@@ -6,7 +6,6 @@ import Icon from '../Components/Icon';
 import HelpTrigger from '../Components/HelpTrigger';
 import { makeClassifier } from '../Utils/Utils';
 import Events, { EventsFactory } from '../Utils/Events';
-import { MESA_SCROLL_EVENT, MESA_REFLOW_EVENT } from './MesaContants';
 
 const headingCellClass = makeClassifier('HeadingCell');
 
@@ -42,8 +41,6 @@ class HeadingCell extends React.PureComponent {
     this.listeners = {
       scroll: Events.add('scroll', this.updateOffset),
       resize: Events.add('resize', this.updateOffset),
-      MesaScroll: Events.add(MESA_SCROLL_EVENT, this.updateOffset),
-      MesaReflow: Events.add(MESA_REFLOW_EVENT, this.updateOffset),
     };
   }
 
diff --git a/packages/libs/coreui/src/components/Mesa/style/Cells.scss b/packages/libs/coreui/src/components/Mesa/style/Cells.scss
index dcafc81e55..9de4fb18d6 100644
--- a/packages/libs/coreui/src/components/Mesa/style/Cells.scss
+++ b/packages/libs/coreui/src/components/Mesa/style/Cells.scss
@@ -1,6 +1,9 @@
 $StickyColumnBorderColor: rgb(204, 204, 204);
 
 .MesaComponent {
+  tr {
+    white-space: break-spaces;
+  }
   th {
     background-color: #e2e2e2;
     transition: background 0.25s;
diff --git a/packages/libs/coreui/src/components/Mesa/style/Ui/DataTable.scss b/packages/libs/coreui/src/components/Mesa/style/Ui/DataTable.scss
index bb4d37c72d..3cead3cd12 100644
--- a/packages/libs/coreui/src/components/Mesa/style/Ui/DataTable.scss
+++ b/packages/libs/coreui/src/components/Mesa/style/Ui/DataTable.scss
@@ -1,63 +1,71 @@
 .MesaComponent {
   .DataTable {
     font-size: $fontSize;
-    width: 100%;
+    display: inline-block;
     margin-bottom: 1.5em;
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-areas:
-      '. header'
-      'margin body';
-    z-index: 0;
+    width: 100%;
+
+    &--HasMargin {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-areas: 'margin table';
+
+      .DataTable-Margin {
+        grid-area: margin;
+      }
+      align-items: end;
+
+      table {
+        grid-area: table;
+      }
+    }
 
     &--Sticky {
+      z-index: 0;
       overflow: auto;
-      .DataTable-Header {
+      position: relative;
+      max-height: 70vh;
+      padding-bottom: 1.5em; /* prevent macos scrollbar from occluding last row */
+      thead {
         position: sticky;
         top: 0;
-        z-index: 1;
+        z-index: 2;
+        overflow: visible;
       }
     }
 
-    .DataTable-Header {
-      grid-area: header;
-    }
-
-    .DataTable-Body {
-      grid-area: body;
-    }
-
-    .DataTable-Margin {
-      grid-area: margin;
-    }
-
-    table {
+    > table {
       width: 100%;
       border-collapse: separate;
-    }
 
-    .DataTable-Sticky {
-      display: block;
-      overflow: auto;
-      position: relative;
-      z-index: 0;
-      max-height: 70vh;
+      td,
+      tr {
+        .ChildRowToggle {
+          width: 4em;
+          vertical-align: middle;
+          text-align: center;
+          padding: 0;
 
-      .DataTable-Header,
-      .DataTable-Body {
-        display: block;
-      }
+          > button {
+            width: 100%;
+            padding: 0;
+            border: none;
+            line-height: 2;
+            background: transparent !important;
+
+            > svg {
+              fill: #777;
+            }
 
-      .DataTable-Body {
-        position: relative;
-        padding-bottom: 1.5em; /* prevent macos scrollbar from occluding last row */
+            &:hover > svg {
+              fill: black;
+            }
+          }
+        }
       }
 
-      .DataTable-Header {
-        overflow: visible;
-        top: 0;
-        position: sticky;
-        z-index: 1;
+      tr._childIsExpanded > .ChildRowToggle > button > svg {
+        fill: black;
       }
     }
   }
diff --git a/packages/libs/coreui/src/components/Mesa/style/Ui/HeadingCell.scss b/packages/libs/coreui/src/components/Mesa/style/Ui/HeadingCell.scss
index c28f238064..2ffdcacaa8 100644
--- a/packages/libs/coreui/src/components/Mesa/style/Ui/HeadingCell.scss
+++ b/packages/libs/coreui/src/components/Mesa/style/Ui/HeadingCell.scss
@@ -10,7 +10,6 @@
       z-index: 1;
 
       .HeadingCell-Content-Aside {
-        flex-basis: 0 1 30px;
         &:last-of-type {
           text-align: right;
         }
diff --git a/packages/libs/wdk-client/src/Views/Question/Params/FilterParamNew/FilterParam.css b/packages/libs/wdk-client/src/Views/Question/Params/FilterParamNew/FilterParam.css
index 5fafe1b704..9508cb00a3 100644
--- a/packages/libs/wdk-client/src/Views/Question/Params/FilterParamNew/FilterParam.css
+++ b/packages/libs/wdk-client/src/Views/Question/Params/FilterParamNew/FilterParam.css
@@ -273,15 +273,12 @@
   top: 0;
   right: 1em;
 }
-.filter-param .membership-filter .HeadingRow:first-child {
+.filter-param .membership-filter .HeadingRow:first-child > th {
   border-top: 1px solid #ccc;
 }
-.filter-param .membership-filter .HeadingRow:last-child {
+.filter-param .membership-filter .HeadingRow:last-child > th {
   border-bottom: 1px solid #ccc;
 }
-.filter-param .membership-filter .DataTable table {
-  border-collapse: collapse;
-}
 .filter-param .membership-filter .DataRow,
 .filter-param .membership-filter .HeadingRow {
   background: white;
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.css b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.css
index a91af6cd0a..e9a7e28c22 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.css
+++ b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.css
@@ -17,16 +17,16 @@
   width: 300px;
 }
 
-.wdk-RecordTable > .Mesa.MesaComponent > .MesaComponent > .DataTable > table {
-  width: auto;
-}
-
-.MesaComponent > .DataTable {
+.wdk-RecordTable > .Mesa.MesaComponent > .MesaComponent > .DataTable {
   position: relative;
   max-width: 100%;
   overflow-x: auto;
 }
 
+.wdk-RecordTable > .Mesa.MesaComponent > .MesaComponent > .DataTable > table {
+  width: auto;
+}
+
 .wdk-RecordTable__Orthologs
   > .Mesa.MesaComponent
   > .Toolbar
diff --git a/packages/libs/web-common/src/styles/client.scss b/packages/libs/web-common/src/styles/client.scss
index c6a287d7c0..5561bc6eee 100644
--- a/packages/libs/web-common/src/styles/client.scss
+++ b/packages/libs/web-common/src/styles/client.scss
@@ -2,8 +2,6 @@
 @import './AllSites.scss';
 @import './question-wizard.css';
 
-$expand-child-row-toggle-width: 3em;
-
 dialog {
   border: none;
   border-radius: 0.25em;
@@ -111,42 +109,6 @@ h4 {
   font-size: 1.4em;
 }
 
-.wdk-DataTableCellExpand > svg {
-  fill: #777;
-}
-
-tr._childIsExpanded
-  > .wdk-DataTableCell__childRowToggle
-  > .wdk-DataTableCellExpand
-  > svg {
-  fill: black;
-}
-
-.wdk-DataTableCellExpand:hover > svg {
-  fill: black;
-}
-
-.wdk-DataTableCellExpand {
-  width: $expand-child-row-toggle-width;
-  padding: 0;
-  border: none;
-  line-height: 2;
-  background: transparent !important;
-}
-
-.wdk-DataTableCell.wdk-DataTableCell__childRowToggle {
-  width: $expand-child-row-toggle-width;
-}
-
-th > .wdk-DataTableCellExpand {
-  display: flex;
-  justify-content: center;
-}
-
-td.wdk-DataTable.wdk-DataTableCell__childRowToggle {
-  vertical-align: middle;
-}
-
 td.wdk-DataTableCell__thumbnail {
   vertical-align: middle;
   height: 50px;
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Downloads/Downloads.scss b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Downloads/Downloads.scss
index 1b7b160cbd..6340654e78 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Downloads/Downloads.scss
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Downloads/Downloads.scss
@@ -47,7 +47,7 @@
       .membership-filter {
         margin-top: 1.5em;
       }
-      .DataTable-Body {
+      .DataTable--Sticky {
         height: 14em;
       }
       .field-list > * {
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.scss b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.scss
index 94bcb08dc0..67376ed1e7 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.scss
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.scss
@@ -35,6 +35,11 @@
         max-width: unset;
         width: unset;
         overflow-x: unset;
+        width: 100%;
+
+        table {
+          width: 100%;
+        }
 
         // Set background-color of selected rows
         tr:has(> td.SelectionCell > div > input:checked) > td {