diff --git a/src/components/ListTable.js b/src/components/ListTable.js
index 5f4dd93f4..5b486bfa9 100644
--- a/src/components/ListTable.js
+++ b/src/components/ListTable.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Cell,
@@ -32,7 +32,9 @@ const styleTable = ({ customAlign, customWidth }) => css`
   ${customAlign && `text-align: ${align(customAlign)}`};
   ${customWidth && `width: ${customWidth}`};
   margin: ${theme.size.medium} 0;
-  table-layout: fixed;
+  > table {
+    table-layout: fixed;
+  }
 `;
 
 const theadStyle = css`
@@ -230,7 +232,6 @@ const generateRowsData = (bodyRowNodes, columns) => {
 
 const ListTable = ({ nodeData: { children, options }, ...rest }) => {
   const ancestors = useAncestorComponentContext();
-  // const { theme: siteTheme } = useDarkMode();
   // TODO: header row count should not be more than 1
   // need a warning in parser
   const headerRowCount = parseInt(options?.['header-rows'], 10) || 0;
@@ -239,9 +240,8 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
   const columnCount = bodyRows[0].children[0].children.length;
 
   // Check if :header-rows: 0 is specified or :header-rows: is omitted
-  const headerRows = useMemo(
-    () => (headerRowCount > 0 ? children[0].children[0].children.slice(0, headerRowCount) : []),
-    [children, headerRowCount]
+  const [headerRows] = useState(() =>
+    headerRowCount > 0 ? children[0].children[0].children.slice(0, headerRowCount) : []
   );
 
   let widths = null;
@@ -263,8 +263,8 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
   const shouldAlternateRowColor = noTableNesting && bodyRows.length > 4;
 
   const tableRef = useRef();
-  const columns = useMemo(() => generateColumns(headerRows[0], bodyRows), [headerRows, bodyRows]);
-  const data = useMemo(() => generateRowsData(bodyRows, columns), [bodyRows, columns]);
+  const [columns] = useState(() => generateColumns(headerRows[0], bodyRows));
+  const [data] = useState(() => generateRowsData(bodyRows, columns));
   const table = useLeafyGreenTable({
     containerRef: tableRef,
     columns: columns,
diff --git a/tests/unit/__snapshots__/ListTable.test.js.snap b/tests/unit/__snapshots__/ListTable.test.js.snap
index 87c3f6566..a9966ff5b 100644
--- a/tests/unit/__snapshots__/ListTable.test.js.snap
+++ b/tests/unit/__snapshots__/ListTable.test.js.snap
@@ -7,6 +7,9 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   width: 100%;
   position: relative;
   margin: 24px 0;
+}
+
+.emotion-0>table {
   table-layout: fixed;
 }
 
@@ -327,6 +330,9 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   width: 100%;
   position: relative;
   margin: 24px 0;
+}
+
+.emotion-0>table {
   table-layout: fixed;
 }