diff --git a/apps/vr-tests-react-components/src/stories/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
index d59978d23a2f85..1cdbaef5daf7cd 100644
--- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
@@ -161,7 +161,46 @@ storiesOf('Table - cell actions', module)
       </Table>
     ),
     { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
-  );
+  )
+  .addStory('in header cell', () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          {columns.map(column => (
+            <TableHeaderCell key={column.columnKey}>{column.label}</TableHeaderCell>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {items.map(item => (
+          <TableRow key={item.file.label} className="row">
+            <TableHeaderCell>
+              <TableCellLayout media={item.file.icon}>
+                {item.file.label}
+                <TableCellActions>
+                  <Button icon={<EditRegular />} appearance="subtle" />
+                  <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
+                </TableCellActions>
+              </TableCellLayout>
+            </TableHeaderCell>
+            <TableCell>
+              <TableCellLayout
+                media={
+                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
+                }
+              >
+                {item.author.label}
+              </TableCellLayout>
+            </TableCell>
+            <TableCell>{item.lastUpdated.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ));
 
 storiesOf('Table', module)
   .addStory(
@@ -290,7 +329,7 @@ storiesOf('Table', module)
         {items.map(item => (
           <TableRow key={item.file.label}>
             <TableCell>
-              <TableCellLayout media={item.file.icon} description="Your organization">
+              <TableCellLayout media={item.file.icon} description="Your organization" appearance="primary">
                 {item.file.label}
               </TableCellLayout>
             </TableCell>
diff --git a/change/@fluentui-react-table-bc9b996e-76bf-44d5-b7a4-0f716a7a6276.json b/change/@fluentui-react-table-bc9b996e-76bf-44d5-b7a4-0f716a7a6276.json
new file mode 100644
index 00000000000000..b3ab6571b56238
--- /dev/null
+++ b/change/@fluentui-react-table-bc9b996e-76bf-44d5-b7a4-0f716a7a6276.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: `TableCellActions` displays correctly inside `TableHeaderCell`",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
index 5bd080863990df..fd11a8a146a996 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
@@ -35,6 +35,7 @@ const useStyles = makeStyles({
     textAlign: 'unset',
   },
   button: {
+    position: 'relative',
     width: '100%',
     display: 'flex',
     flexGrow: 1,