diff --git a/docs/data/material/components/table/DataTable.js b/docs/data/material/components/table/DataTable.js
index 19223749a35a33..1a509df8f8bfb6 100644
--- a/docs/data/material/components/table/DataTable.js
+++ b/docs/data/material/components/table/DataTable.js
@@ -46,6 +46,7 @@ export default function DataTable() {
         }}
         pageSizeOptions={[5, 10]}
         checkboxSelection
+        sx={{ overflow: 'clip' }}
       />
     </div>
   );
diff --git a/docs/data/material/components/table/DataTable.tsx b/docs/data/material/components/table/DataTable.tsx
index 386a2adc0afdd6..f902e6e0089b41 100644
--- a/docs/data/material/components/table/DataTable.tsx
+++ b/docs/data/material/components/table/DataTable.tsx
@@ -46,6 +46,7 @@ export default function DataTable() {
         }}
         pageSizeOptions={[5, 10]}
         checkboxSelection
+        sx={{ overflow: 'clip' }}
       />
     </div>
   );
diff --git a/docs/data/material/components/table/DataTable.tsx.preview b/docs/data/material/components/table/DataTable.tsx.preview
index 925b43c630a7c0..594e38d89a8569 100644
--- a/docs/data/material/components/table/DataTable.tsx.preview
+++ b/docs/data/material/components/table/DataTable.tsx.preview
@@ -8,4 +8,5 @@
   }}
   pageSizeOptions={[5, 10]}
   checkboxSelection
+  sx={{ overflow: 'clip' }}
 />
\ No newline at end of file
diff --git a/docs/data/material/components/table/table.md b/docs/data/material/components/table/table.md
index 2703eb5b5a14ab..83c752b3f3adc6 100644
--- a/docs/data/material/components/table/table.md
+++ b/docs/data/material/components/table/table.md
@@ -33,7 +33,7 @@ This constraint makes building rich data tables challenging.
 The [`DataGrid` component](/x/react-data-grid/) is designed for use-cases that are focused on handling large amounts of tabular data.
 While it comes with a more rigid structure, in exchange, you gain more powerful features.
 
-{{"demo": "DataTable.js", "bg": "inline"}}
+{{"demo": "DataTable.js", "bg": "outlined"}}
 
 ## Dense table