diff --git a/src/components/table/Table.vue b/src/components/table/Table.vue
index 5a158e5..f567e5d 100644
--- a/src/components/table/Table.vue
+++ b/src/components/table/Table.vue
@@ -1,7 +1,7 @@
 <template>
   <table
-    class="w-full"
     :class="[
+      'w-full',
       {
         'overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table': scrollable,
         'relative': stickyHeader,
diff --git a/src/components/table/TableCell.vue b/src/components/table/TableCell.vue
index 969932b..8afecc2 100644
--- a/src/components/table/TableCell.vue
+++ b/src/components/table/TableCell.vue
@@ -1,7 +1,7 @@
 <template>
   <td
-    class="last:pr-0"
     :class="[
+      'last:pr-0',
       {
         // density
         'py-1 pr-2': tableProps.density === 'tight',
diff --git a/src/components/table/TableHeader.vue b/src/components/table/TableHeader.vue
index bf88bf0..1f71eb0 100644
--- a/src/components/table/TableHeader.vue
+++ b/src/components/table/TableHeader.vue
@@ -1,8 +1,12 @@
 <template>
   <th
-    class="py-2 font-medium pr-1 last:pr-0"
+    class="font-medium"
     :class="[
+      'last:pr-0',
       {
+        // density
+        'py-1 pr-2': tableProps.density === 'tight',
+        'py-2 pr-4': tableProps.density === 'normal',
         //sort
         'cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out': sort,
         //stickyHeader