diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
index 9b8bf62de..5f3e4c12d 100644
--- a/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
@@ -75,7 +75,7 @@ export function DataTable<TData, TValue>({
   return (
     <div className="flex flex-col gap-4">
       <DataTableToolbar table={table} />
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/v4/components/cards/payments.tsx b/apps/v4/components/cards/payments.tsx
index 25afa756d..66f36977a 100644
--- a/apps/v4/components/cards/payments.tsx
+++ b/apps/v4/components/cards/payments.tsx
@@ -209,7 +209,7 @@ export function CardsPayments() {
         </CardAction>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
-        <div className="rounded-md border">
+        <div className="overflow-hidden rounded-md border">
           <Table>
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/v4/content/docs/components/data-table.mdx b/apps/v4/content/docs/components/data-table.mdx
index 29a56a995..b66f08572 100644
--- a/apps/v4/content/docs/components/data-table.mdx
+++ b/apps/v4/content/docs/components/data-table.mdx
@@ -185,7 +185,7 @@ export function DataTable<TData, TValue>({
   })
 
   return (
-    <div className="rounded-md border">
+    <div className="overflow-hidden rounded-md border">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -425,7 +425,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           { // .... }
         </Table>
@@ -499,7 +499,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -602,7 +602,7 @@ export function DataTable<TData, TValue>({
           className="max-w-sm"
         />
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -715,7 +715,7 @@ export function DataTable<TData, TValue>({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -805,7 +805,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table />
       </div>
     </div>
diff --git a/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx b/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
index 27588540d..0b614c449 100644
--- a/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
@@ -233,7 +233,7 @@ export default function DataTableDemo() {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table.tsx b/apps/www/app/(app)/examples/tasks/components/data-table.tsx
index 2dd726e5a..d763f5b84 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table.tsx
@@ -70,7 +70,7 @@ export function DataTable<TData, TValue>({
   return (
     <div className="space-y-4">
       <DataTableToolbar table={table} />
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/www/components/cards/data-table.tsx b/apps/www/components/cards/data-table.tsx
index c59de7313..d712100d8 100644
--- a/apps/www/components/cards/data-table.tsx
+++ b/apps/www/components/cards/data-table.tsx
@@ -239,7 +239,7 @@ export function CardsDataTable() {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-        <div className="rounded-md border">
+        <div className="overflow-hidden rounded-md border">
           <Table>
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/www/content/docs/components/data-table.mdx b/apps/www/content/docs/components/data-table.mdx
index e5fa2bd23..965f5fece 100644
--- a/apps/www/content/docs/components/data-table.mdx
+++ b/apps/www/content/docs/components/data-table.mdx
@@ -185,7 +185,7 @@ export function DataTable<TData, TValue>({
   })
 
   return (
-    <div className="rounded-md border">
+    <div className="overflow-hidden rounded-md border">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -425,7 +425,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           { // .... }
         </Table>
@@ -499,7 +499,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -602,7 +602,7 @@ export function DataTable<TData, TValue>({
           className="max-w-sm"
         />
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -715,7 +715,7 @@ export function DataTable<TData, TValue>({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -805,7 +805,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table />
       </div>
     </div>
diff --git a/apps/www/registry/default/examples/data-table-demo.tsx b/apps/www/registry/default/examples/data-table-demo.tsx
index 7ad0c5a05..8de0e1b37 100644
--- a/apps/www/registry/default/examples/data-table-demo.tsx
+++ b/apps/www/registry/default/examples/data-table-demo.tsx
@@ -233,7 +233,7 @@ export default function DataTableDemo() {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/www/registry/new-york/examples/data-table-demo.tsx b/apps/www/registry/new-york/examples/data-table-demo.tsx
index 62db99ecd..a9d6aec25 100644
--- a/apps/www/registry/new-york/examples/data-table-demo.tsx
+++ b/apps/www/registry/new-york/examples/data-table-demo.tsx
@@ -233,7 +233,7 @@ export default function DataTableDemo() {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (