diff --git a/src/lib/elements/table/cell.svelte b/src/lib/elements/table/cell.svelte
index 8d45be20a..4c778d31a 100644
--- a/src/lib/elements/table/cell.svelte
+++ b/src/lib/elements/table/cell.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-    width={width?.toString() ?? ''}
+    style={width ? `--p-col-width:${width?.toString()}` : ''}
     class="table-col"
     class:u-overflow-visible={showOverflow}
     class:is-only-desktop={onlyDesktop}
diff --git a/src/lib/elements/table/cellHead.svelte b/src/lib/elements/table/cellHead.svelte
index 1ff8ade15..7be4a0655 100644
--- a/src/lib/elements/table/cellHead.svelte
+++ b/src/lib/elements/table/cellHead.svelte
@@ -2,7 +2,10 @@
     export let width: number = null;
 </script>
 
-<div style={`width: ${width?.toString() + 'px' ?? ''}`} class="table-thead-col" role="columnheader">
+<div
+    style={width ? `--p-col-width:${width?.toString()}` : ''}
+    class="table-thead-col"
+    role="columnheader">
     <span class="eyebrow-heading-3">
         <slot />
     </span>