diff --git a/src/core/features/reportbuilder/components/report-detail/report-detail.html b/src/core/features/reportbuilder/components/report-detail/report-detail.html
index 3f1810cb9..d05ddfcdc 100644
--- a/src/core/features/reportbuilder/components/report-detail/report-detail.html
+++ b/src/core/features/reportbuilder/components/report-detail/report-detail.html
@@ -22,7 +22,7 @@
             </ng-container>
 
             <ng-container *ngIf="!isCardLayout">
-                <table class="core-table">
+                <table class="core-table x-scrollable">
                     <thead>
                         <tr>
                             <th *ngFor="let header of state.report.data.headers">
diff --git a/src/core/features/reportbuilder/components/report-detail/report-detail.scss b/src/core/features/reportbuilder/components/report-detail/report-detail.scss
index 427a3cffb..0cf045281 100644
--- a/src/core/features/reportbuilder/components/report-detail/report-detail.scss
+++ b/src/core/features/reportbuilder/components/report-detail/report-detail.scss
@@ -6,8 +6,6 @@
     }
 
     table {
-        overflow-x: auto;
-
         th, td {
             min-width: 200px;
         }
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 88c59f68e..c83994d66 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -2023,6 +2023,10 @@ table.core-table {
     margin: 1em auto;
     color: var(--text-color);
 
+    &.x-scrollable {
+        overflow-x: auto;
+        display: block;
+    }
 
     thead th {
         vertical-align: bottom;
@@ -2031,8 +2035,13 @@ table.core-table {
         background-color: var(--core-table-header-background);
     }
 
-    tbody th {
-        font-weight: normal;
+    tbody {
+        th {
+            font-weight: normal;
+        }
+        td {
+            font-size: 16px;
+        }
     }
 
     th, td {
@@ -2045,10 +2054,6 @@ table.core-table {
         border-bottom: 1px solid var(--core-table-border-color);
     }
 
-    tbody td {
-        font-size: 16px;
-    }
-
     .odd {
         --cell-background: var(--core-table-odd-cell-background);
         --cell-hover: var(--core-table-odd-cell-hover);
@@ -2069,19 +2074,21 @@ table.core-table {
         }
     }
 
-    tbody.auto-striped tr:nth-child(odd) {
-        background-color: var(--core-table-odd-cell-background);
+    tbody.auto-striped {
+        tr:nth-child(odd) {
+            background-color: var(--core-table-odd-cell-background);
 
-        &:hover {
-            background-color: var(--core-table-even-odd-hover);
+            &:hover {
+                background-color: var(--core-table-even-odd-hover);
+            }
         }
-    }
 
-    tbody.auto-striped tr:nth-child(even) {
-        background-color: var(--core-table-even-cell-background);
+        tr:nth-child(even) {
+            background-color: var(--core-table-even-cell-background);
 
-        &:hover {
-            background-color: var(--core-table-even-cell-hover);
+            &:hover {
+                background-color: var(--core-table-even-cell-hover);
+            }
         }
     }