diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 55b4f3b91..ff57e3dfb 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -366,7 +366,7 @@ function marqueeAnimation(truncate) {
     }
     // offsetwidth = width of the text, clientWidth = width of parent text (div)
     // because some index page has icons, we use two time parent element
-    if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.clientWidth) {        
+    if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {        
         truncate.addEventListener('mouseover', function () {
             truncate.parentElement.style.animationPlayState = 'running';
             truncate.parentElement.classList.add('animate-marquee');
@@ -384,6 +384,7 @@ function marqueeAnimation(truncate) {
 
         truncate.classList.add('truncate');
         truncate.parentElement.classList.add('truncate');
+        truncate.parentElement.parentElement.classList.add('overflow-x-hidden');
     }
 }
 
@@ -393,7 +394,7 @@ document.querySelectorAll('[data-truncate]').forEach((truncate) => {
 
 //disable/enable icons ejected from data-truncate, HTML of icons ejected from parent element (data-truncate)
 document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
-    defaultText.parentElement.parentElement.parentElement.appendChild(defaultText);
+    defaultText.parentElement.parentElement.parentElement.parentElement.appendChild(defaultText);
 });
 //disable/enable icons ejected from data-truncate
 
diff --git a/resources/views/components/table/td.blade.php b/resources/views/components/table/td.blade.php
index 9e993a0da..35dbacf70 100644
--- a/resources/views/components/table/td.blade.php
+++ b/resources/views/components/table/td.blade.php
@@ -9,9 +9,11 @@
     @endphp
     <div {{ $first_attributes }}>
         <div>
-            <span data-truncate>
-                {!! $first !!}
-            </span>
+            <div>
+                <span data-truncate>
+                    {!! $first !!}
+                </span>
+            </div>
         </div>
     </div>
     @endif
@@ -26,16 +28,20 @@
     @endphp
     <div {{ $second_attributes }}>
         <div>
-            <span data-truncate>
-                {!! $second !!}
-            </span>
+            <div>
+                <span data-truncate>
+                    {!! $second !!}
+                </span>
+            </div>
         </div>
     </div>
     @endif
 
     <div>
-        <span data-truncate>
-            {{ $slot }}
-        </span>
+        <div>
+            <span data-truncate>
+                {{ $slot }}
+            </span>
+        </div>
     </div>
 </td>
diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php
index 100e2e467..2bad428e2 100644
--- a/resources/views/components/table/th.blade.php
+++ b/resources/views/components/table/th.blade.php
@@ -9,9 +9,11 @@
     @endphp
     <div {{ $first_attributes }}>
         <div>
-            <span data-truncate>
-                {!! $first !!}
-            </span>
+            <div>
+                <span data-truncate>
+                    {!! $first !!}
+                </span>
+            </div>
         </div>
     </div>
     @endif
@@ -26,16 +28,20 @@
     @endphp
     <div {{ $second_attributes }}>
         <div>
-            <span data-truncate>
-                {!! $second !!}
-            </span>
+            <div>
+                <span data-truncate>
+                    {!! $second !!}
+                </span>
+            </div>
         </div>
     </div>
     @endif
 
     <div>
-        <span data-truncate>
-            {{ $slot }}
-        </span>
+        <div>
+            <span data-truncate>
+                {{ $slot }}
+            </span>
+        </div>
     </div>
 </th>