diff --git a/src/components/forms/checkbox/Checkbox.vue b/src/components/forms/checkbox/Checkbox.vue
index 7a921860..ad419d77 100644
--- a/src/components/forms/checkbox/Checkbox.vue
+++ b/src/components/forms/checkbox/Checkbox.vue
@@ -110,7 +110,11 @@ const { hasError, hasSuccess } = useFormTextDetail(
         <Icon v-else-if="modelValue" name="checkbox-fill" :size="iconSize" />
         <Icon v-else name="checkbox-blank-line" :size="iconSize" />
       </span>
-      <span :class="css.label" class="text-body-1">
+      <span
+        v-if="label || $slots.default"
+        :class="css.label"
+        class="text-body-1"
+      >
         <slot>{{ label }}</slot>
       </span>
     </label>
diff --git a/src/components/tables/DataTable.stories.ts b/src/components/tables/DataTable.stories.ts
index 4528af5d..3fc93b76 100644
--- a/src/components/tables/DataTable.stories.ts
+++ b/src/components/tables/DataTable.stories.ts
@@ -92,22 +92,22 @@ const render: StoryFn<Props> = (args) => ({
     };
   },
   template: `
-      <div class="flex flex-col space-y-4">
-        <div class="flex items-center space-x-4">
-          <TextField
-              v-if="search !== undefined"
-              v-model="search"
-              placeholder="search"
-              label="search"
-              class="w-1/2 lg:w-2/5"
-              variant="outlined"
-              color="primary"
-              hide-details
-          />
-          <span v-if="modelValue">selected: {{ modelValue.length }}</span>
-        </div>
-        <DataTable
-            v-bind="
+    <div class="flex flex-col space-y-4">
+      <div class="flex items-center space-x-4">
+        <TextField
+          v-if="search !== undefined"
+          v-model="search"
+          placeholder="search"
+          label="search"
+          class="w-1/2 lg:w-2/5"
+          variant="outlined"
+          color="primary"
+          hide-details
+        />
+        <span v-if="modelValue">selected: {{ modelValue.length }}</span>
+      </div>
+      <DataTable
+        v-bind="
                 objectOmit(args, [
                   'modelValue',
                   'pagination',
@@ -117,26 +117,26 @@ const render: StoryFn<Props> = (args) => ({
                   'collapsed',
                 ])
             "
-            v-model="modelValue"
-            v-model:pagination="pagination"
-            v-model:sort="sort"
-            :search="search"
-            v-model:expanded="args.expanded"
-            v-model:group="args.group"
-            v-model:collapsed="args.collapsed"
-            :row-attr="args.rowAttr"
-            :rows="args.rows"
-        >
-          <template #item.action>
-            <Button icon variant="text" size="sm">
-              <Icon name="more-fill" color="primary" />
-            </Button>
-          </template>
-          <template v-if="args.expanded" #expanded-item>
-            <Card>
-              <template #header> Expanded content</template>
-              <DataTable
-                  v-bind="
+        v-model="modelValue"
+        v-model:pagination="pagination"
+        v-model:sort="sort"
+        :search="search"
+        v-model:expanded="args.expanded"
+        v-model:group="args.group"
+        v-model:collapsed="args.collapsed"
+        :row-attr="args.rowAttr"
+        :rows="args.rows"
+      >
+        <template #item.action>
+          <Button icon variant="text" size="sm">
+            <Icon name="more-fill" color="primary" />
+          </Button>
+        </template>
+        <template v-if="args.expanded" #expanded-item>
+          <Card>
+            <template #header> Expanded content</template>
+            <DataTable
+              v-bind="
                     objectOmit(args, [
                       'modelValue',
                       'pagination',
@@ -146,13 +146,13 @@ const render: StoryFn<Props> = (args) => ({
                       'collapsed',
                     ])
                   "
-                  :row-attr="args.rowAttr"
-                  :rows="args.rows"
-              />
-            </Card>
-          </template>
-        </DataTable>
-      </div>`,
+              :row-attr="args.rowAttr"
+              :rows="args.rows"
+            />
+          </Card>
+        </template>
+      </DataTable>
+    </div>`,
 });
 
 const data = [
diff --git a/src/components/tables/DataTable.vue b/src/components/tables/DataTable.vue
index d93b8bce..f8bb699a 100644
--- a/src/components/tables/DataTable.vue
+++ b/src/components/tables/DataTable.vue
@@ -972,7 +972,12 @@ onMounted(() => {
                   { [css.tr__selected]: isSelected(row[rowIdentifier]) },
                 ]"
               >
-                <td v-if="selectedData" :class="css.checkbox">
+                <td
+                  v-if="selectedData"
+                  :class="css.checkbox"
+                  colspan="1"
+                  rowspan="1"
+                >
                   <Checkbox
                     :data-cy="`table-toggle-check-${index}`"
                     :value="isSelected(row[rowIdentifier])"
@@ -990,6 +995,8 @@ onMounted(() => {
                     column.cellClass,
                     css[`align__${column.align ?? 'start'}`],
                   ]"
+                  :colspan="column.colspan ?? 1"
+                  :rowspan="column.rowspan ?? 1"
                 >
                   <slot
                     v-if="column.key === 'expand'"
@@ -1183,7 +1190,10 @@ onMounted(() => {
     }
 
     .checkbox {
-      @apply ps-4 w-14;
+      @apply px-2 w-[3.625rem] max-w-[3.625rem];
+      label {
+        @apply ml-0;
+      }
     }
 
     &.dense {
diff --git a/src/components/tables/TableHead.vue b/src/components/tables/TableHead.vue
index b81f704c..4fa7eea6 100644
--- a/src/components/tables/TableHead.vue
+++ b/src/components/tables/TableHead.vue
@@ -19,6 +19,8 @@ export interface BaseTableColumn<T> {
   align?: 'start' | 'center' | 'end';
   class?: string;
   cellClass?: string;
+  colspan?: string | number;
+  rowspan?: string | number;
 
   [key: string]: any;
 }
@@ -153,7 +155,13 @@ const getSortDirection = (key: TableColumn<T>['key']) =>
     ]"
   >
     <tr :class="css.tr">
-      <th v-if="selectable" :class="css.checkbox" scope="col">
+      <th
+        v-if="selectable"
+        :class="css.checkbox"
+        scope="col"
+        colspan="1"
+        rowspan="1"
+      >
         <Checkbox
           :disabled="disableCheckAll"
           :indeterminate="indeterminate"
@@ -178,6 +186,8 @@ const getSortDirection = (key: TableColumn<T>['key']) =>
           },
         ]"
         scope="col"
+        :colspan="column.colspan ?? 1"
+        :rowspan="column.rowspan ?? 1"
       >
         <slot :column="column" :name="`header.${column.key.toString()}`">
           <Badge
@@ -335,13 +345,16 @@ const getSortDirection = (key: TableColumn<T>['key']) =>
     }
 
     .checkbox {
-      @apply ps-4 w-14;
+      @apply px-2 w-[3.625rem] max-w-[3.625rem];
+      label {
+        @apply ml-0;
+      }
     }
   }
 
   &__loader {
     .progress {
-      @apply relative w-full py-8;
+      @apply relative py-8;
     }
 
     &_linear {