From d8d626ec4cc88c0757dbabf35edf7bd06d04ed2a Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Tue, 25 Mar 2025 17:00:37 +0500
Subject: [PATCH] [FIX] Table Column Cell text overlap #1272

---
 .../comps/comps/tableComp/tableCompView.tsx   | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 0325d5d75..792d22379 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -243,7 +243,7 @@ const TableWrapper = styled.div<{
               position: -webkit-sticky;
               // top: ${props.$fixedToolbar ? '47px' : '0'};
               top: 0;
-              z-index: 99;
+              z-index: 2;
             `
           }
           > tr {
@@ -256,7 +256,14 @@ const TableWrapper = styled.div<{
             color: ${(props) => props.$headerStyle.headerText};
             // border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
             
-
+            /* Proper styling for fixed header cells */
+            &.ant-table-cell-fix-left, &.ant-table-cell-fix-right {
+              z-index: 1; 
+              background: ${(props) => props.$headerStyle.headerBackground};
+            }
+            
+          
+            
             > div {
               margin: ${(props) => props.$headerStyle.margin};
 
@@ -295,7 +302,27 @@ const TableWrapper = styled.div<{
 
         td {
           padding: 0px 0px;
-          // ${(props) => props.$showHRowGridBorder ?'border-bottom: 1px solid #D7D9E0 !important;': `border-bottom: 0px;`}
+          // ${(props) => props.$showHRowGridBorder ? 'border-bottom: 1px solid #D7D9E0 !important;': `border-bottom: 0px;`}
+          
+          /* Proper styling for Fixed columns in the table body */
+          &.ant-table-cell-fix-left, &.ant-table-cell-fix-right {
+            z-index: 1; 
+            background: inherit;
+            background-color: ${(props) => props.$style.background};
+            transition: background-color 0.3s;
+          }
+          
+        }
+        
+        /* Fix for selected and hovered rows */
+        tr.ant-table-row-selected td.ant-table-cell-fix-left,
+        tr.ant-table-row-selected td.ant-table-cell-fix-right {
+          background-color: ${(props) => props.$rowStyle?.selectedRowBackground || '#e6f7ff'} !important;
+        }
+        
+        tr.ant-table-row:hover td.ant-table-cell-fix-left,
+        tr.ant-table-row:hover td.ant-table-cell-fix-right {
+          background-color: ${(props) => props.$rowStyle?.hoverRowBackground || '#f5f5f5'} !important;
         }
 
         thead > tr:first-child {
@@ -428,7 +455,7 @@ const TableTd = styled.td<{
       }
 
       &:active {
-        color: ${(props) => props.$linkStyle?.activeText}};
+        color: ${(props) => props.$linkStyle?.activeText};
       }
     }
   }