diff --git a/src/client/components/DataTable.tsx b/src/client/components/DataTable.tsx
index 0aef69c..53f78e3 100644
--- a/src/client/components/DataTable.tsx
+++ b/src/client/components/DataTable.tsx
@@ -75,7 +75,7 @@ export function DataTable<TData>({
 
               {headerGroup.headers.map((header) => {
                 return (
-                  <TableHead key={header.id}>
+                  <TableHead key={header.id} className="text-nowrap">
                     {header.isPlaceholder
                       ? null
                       : flexRender(
diff --git a/src/client/routes/survey/$surveyId/index.tsx b/src/client/routes/survey/$surveyId/index.tsx
index 1f8c5a5..9666070 100644
--- a/src/client/routes/survey/$surveyId/index.tsx
+++ b/src/client/routes/survey/$surveyId/index.tsx
@@ -21,6 +21,7 @@ import { useMemo } from 'react';
 import { SurveyDownloadBtn } from '@/components/survey/SurveyDownloadBtn';
 import dayjs from 'dayjs';
 import { SurveyUsageBtn } from '@/components/survey/SurveyUsageBtn';
+import { Scrollbar } from '@radix-ui/react-scroll-area';
 
 type SurveyResultItem =
   AppRouterOutput['survey']['resultList']['items'][number];
@@ -122,10 +123,8 @@ function PageComponent() {
         />
       }
     >
-      <ScrollArea className="h-full overflow-hidden p-4">
-        <ScrollBar orientation="horizontal" />
-
-        <div className="mb-4">
+      <div className="h-full overflow-hidden p-4">
+        <div className="mb-4 w-full">
           <Card>
             <CardHeader>
               <CardTitle>{t('Count')}</CardTitle>
@@ -140,10 +139,12 @@ function PageComponent() {
           </Card>
         </div>
 
-        <div>
+        <ScrollArea className="w-full">
+          <Scrollbar orientation="horizontal" />
+
           <DataTable columns={columns} data={dataSource} />
-        </div>
-      </ScrollArea>
+        </ScrollArea>
+      </div>
     </CommonWrapper>
   );
 }