diff --git a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
index a35897bcc..5163bff01 100644
--- a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
+++ b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
@@ -193,14 +193,32 @@
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Actions' | translate }}</th>
-            <td mat-cell *matCellDef="let column" class="gap-15percent">
-              <button type="button" color="primary" mat-icon-button (click)="editColumn(column)">
-                <fa-icon icon="edit" size="lg"></fa-icon>
-              </button>
-              <button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)">
-                <fa-icon icon="trash" size="lg"></fa-icon>
-              </button>
+            <th mat-header-cell *matHeaderCellDef class="actions-column">
+              {{ 'labels.inputs.Actions' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let column" class="actions-column">
+              <div class="actions-wrapper">
+                <button
+                  type="button"
+                  color="primary"
+                  mat-icon-button
+                  (click)="editColumn(column)"
+                  matTooltip="{{ 'labels.buttons.Edit' | translate }}"
+                  aria-label="{{ 'labels.buttons.Edit' | translate }}"
+                >
+                  <fa-icon icon="edit" size="sm"></fa-icon>
+                </button>
+                <button
+                  type="button"
+                  color="warn"
+                  mat-icon-button
+                  (click)="deleteColumn(column)"
+                  matTooltip="{{ 'labels.buttons.Delete' | translate }}"
+                  aria-label="{{ 'labels.buttons.Delete' | translate }}"
+                >
+                  <fa-icon icon="trash" size="sm"></fa-icon>
+                </button>
+              </div>
             </td>
           </ng-container>
 
diff --git a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.scss b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.scss
index 167c50916..6c5148029 100644
--- a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.scss
+++ b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.scss
@@ -19,6 +19,58 @@
   }
 }
 
-table {
+.mat-mdc-table {
   width: 100%;
+  overflow-x: auto;
+  display: block;
+}
+
+.mat-mdc-header-row,
+.mat-mdc-row {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  min-width: 800px;
+}
+
+.actions-column {
+  width: 100px !important;
+  min-width: 100px !important;
+  max-width: 100px !important;
+  text-align: center;
+  position: sticky;
+  right: 0;
+  background: #fff;
+  z-index: 1;
+}
+
+.actions-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.actions-wrapper .mat-mdc-icon-button {
+  width: 36px;
+  height: 36px;
+  padding: 6px;
+}
+
+.actions-wrapper fa-icon {
+  font-size: 14px;
+}
+
+th.mat-mdc-header-cell:first-child,
+td.mat-mdc-cell:first-child {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th.mat-mdc-header-cell:not(.actions-column, :first-child),
+td.mat-mdc-cell:not(.actions-column, :first-child) {
+  width: 80px;
+  min-width: 80px;
 }
diff --git a/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html b/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
index 42eee3d7d..7f4a64069 100644
--- a/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
+++ b/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
@@ -168,19 +168,33 @@
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+            <th mat-header-cell *matHeaderCellDef class="center actions-column">
               {{ 'labels.inputs.Actions' | translate }}
             </th>
-            <td mat-cell *matCellDef="let column" class="center gap-15percent">
+            <td mat-cell *matCellDef="let column" class="center actions-column">
               @if (!column.system) {
-                <button type="button" color="primary" mat-icon-button (click)="editColumn(column)">
-                  <fa-icon icon="edit" size="lg"></fa-icon>
-                </button>
-              }
-              @if (!column.system) {
-                <button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)">
-                  <fa-icon icon="trash" size="lg"></fa-icon>
-                </button>
+                <div class="actions-wrapper">
+                  <button
+                    type="button"
+                    color="primary"
+                    mat-icon-button
+                    (click)="editColumn(column)"
+                    matTooltip="{{ 'labels.buttons.Edit' | translate }}"
+                    aria-label="{{ 'labels.buttons.Edit' | translate }}"
+                  >
+                    <fa-icon icon="edit" size="sm"></fa-icon>
+                  </button>
+                  <button
+                    type="button"
+                    color="warn"
+                    mat-icon-button
+                    (click)="deleteColumn(column)"
+                    matTooltip="{{ 'labels.buttons.Delete' | translate }}"
+                    aria-label="{{ 'labels.buttons.Delete' | translate }}"
+                  >
+                    <fa-icon icon="trash" size="sm"></fa-icon>
+                  </button>
+                </div>
               }
             </td>
           </ng-container>
diff --git a/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.scss b/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.scss
index 4561ef8a6..80f08a6a3 100644
--- a/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.scss
+++ b/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.scss
@@ -6,6 +6,58 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-table {
+.mat-mdc-table {
   width: 100%;
+  overflow-x: auto;
+  display: block;
+}
+
+.mat-mdc-header-row,
+.mat-mdc-row {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  min-width: 800px;
+}
+
+.actions-column {
+  width: 100px !important;
+  min-width: 100px !important;
+  max-width: 100px !important;
+  text-align: center;
+  position: sticky;
+  right: 0;
+  background: #fff;
+  z-index: 1;
+}
+
+.actions-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.actions-wrapper .mat-mdc-icon-button {
+  width: 36px;
+  height: 36px;
+  padding: 6px;
+}
+
+.actions-wrapper fa-icon {
+  font-size: 14px;
+}
+
+th.mat-mdc-header-cell:first-child,
+td.mat-mdc-cell:first-child {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+th.mat-mdc-header-cell:not(.actions-column, :first-child),
+td.mat-mdc-cell:not(.actions-column, :first-child) {
+  width: 80px;
+  min-width: 80px;
 }