Overlapping problem in fixed header and fixed left first column

Question

I have fixed header and first column of my LWC custom table. but the problem is when I scroll to right the other header titles are overlapping over my fixed column header (not for other rows of table only for header). I think I have did something wrong in CSS. I have tried many solutions but it is not worked. can any help me out from this problem?

HTML

<template>
<div>
    
    <div class="external-events slds-table--header-fixed_container slds-p-top_none " style="height:20rem;border:1px solid black">
    <div class="NewTable slds-scrollable slds-p-bottom_xx-large " style="height:100%;" >
    <button label = "Down" onclick = {handleDown}>Down</button>
    <table  class="myTable slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
        <thead>
            <tr >                     
                <th class="fix">
                    <a data-id="Name" onclick={sort} >
                        <div>Name
                            <lightning-icon icon-name="utility:arrowup" size="x-small" if:true={nameUpBool}></lightning-icon>
                            <lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={nameDWBool}></lightning-icon>
                        </div>
                        
                    </a>
                </th>
                <th>
                    <a data-id="Industry" onclick={sort}>
                        <div>Industry
                            <lightning-icon icon-name="utility:arrowup" size="x-small" if:true={ageUpBool}></lightning-icon>
                            <lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={ageDWBool}></lightning-icon>
                        </div>
                    </a>
                </th>
                <th>
                    <div>AccountNumber</div>
                </th>
                <th>
                    <div>Rating</div>                      
                </th>
                 <th>
                     <div>type</div>                      
                </th>
                <th>
                     <div>Phone</div>                     
                </th>
            </tr>
        </thead>
        <tbody >
            <template for:each={accountData} for:item="person">
                <tr  key={person.Id} data-id={person.Id}>                
                    <td key={person.Id}  class="fix">                                
                        {person.Name}
                    </td>
                    <td key={person.Id}>
                        {person.Industry}
                    </td>
                    <td key={person.Id}>
                        {person.AccountNumber}
                    </td>
                    <td key={person.Id}>
                        {person.Rating}
                    </td>  
                     <td key={person.Id}>
                        {person.type}
                    </td>
                    <td  key={person.Id}>
                        {person.Phone}
                    </td> 
                    
                </tr>                                                                     
            </template>
        </tbody>
    </table>
    <lightning-button variant="base" label="" title="Looks like a link" onclick={handleClick} class="bottom slds-m-left_x-small"></lightning-button>
   
    </div></div>
     <button  onclick = {handleTop} >Top</button>
</div>

CSS

 table thead th {
   position: sticky;
   top: 0;
   z-index: 2;
 }

 table tbody th {
   position: sticky;
   top: 0;
   z-index: 1;
   }

 /*table tr>th:first-child*/
   /* or .slds-table tr>th:first-child  {*/
    /*position: sticky;
  /*z-index: 1;*/
  /*top: 0;
  left: 0;
   }*/

  .fix{
    position: sticky;
    left: 0;
    z-index: 1;
    background: #f8f8f8;
  }

Answer 1

I had solved this issue by creating separate CSS class for fixing header (class="fix-rowHeader") and fixing fixed column header (class="fix-column") instead of using table thead th and table tbody th classes(I have commented both). Its a issue of Z index, fixed column header must have a higher z-index value than a scrollable columns, fixed column and fixed headers.

 HTML

 <template>
  <div>

<div class="external-events slds-table--header-fixed_container slds-p-top_none " style="height:20rem;border:1px solid black">
<div class="NewTable slds-scrollable slds-p-bottom_xx-large " style="height:100%;" >
<button label = "Down" onclick = {handleDown}>Down</button>
<table  class="myTable slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
    <thead>
        <tr >                     
            <th class="fix-column">
                <a data-id="Name" onclick={sort} >
                    <div>Name
                        <lightning-icon icon-name="utility:arrowup" size="x-small" if:true={nameUpBool}></lightning-icon>
                        <lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={nameDWBool}></lightning-icon>
                    </div>
                    
                </a>
            </th>
            <th class="fix-rowHeader">
                <a data-id="Industry" onclick={sort}>
                    <div>Industry
                        <lightning-icon icon-name="utility:arrowup" size="x-small" if:true={ageUpBool}></lightning-icon>
                        <lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={ageDWBool}></lightning-icon>
                    </div>
                </a>
            </th>
            <th class="fix-rowHeader">
                <div>AccountNumber</div>
            </th>
            <th class="fix-rowHeader">
                <div>Rating</div>                      
            </th>
             <th class="fix-rowHeader">
                 <div>type</div>                      
            </th>
            <th class="fix-rowHeader">
                 <div>Phone</div>                     
            </th>
        </tr>
    </thead>
    <tbody >
        <template for:each={accountData} for:item="person">
            <tr  key={person.Id} data-id={person.Id}>                
                <td key={person.Id}  class="fix">                                
                    {person.Name}
                </td>
                <td key={person.Id}>
                    {person.Industry}
                </td>
                <td key={person.Id}>
                    {person.AccountNumber}
                </td>
                <td key={person.Id}>
                    {person.Rating}
                </td>  
                 <td key={person.Id}>
                    {person.type}
                </td>
                <td  key={person.Id}>
                    {person.Phone}
                </td> 
                
            </tr>                                                                     
        </template>
    </tbody>
</table>
<lightning-button variant="base" label="" title="Looks like a link" onclick={handleClick} class="bottom slds-m-left_x-small"></lightning-button>

</div></div>
 <button  onclick = {handleTop} >Top</button>

 CSS

 /* table thead th {
   position: sticky;
   top: 0;
   z-index: 2;
 }

table tbody th {
  position: sticky;
  top: 0;
 z-index: 1;
 }*/

  /*table tr>th:first-child*/
      /* or .slds-table tr>th:first-child  {*/
      /*position: sticky;
     /*z-index: 1;*/
     /*top: 0;
    left: 0;
    }*/

.fix{
    position: sticky;
    left: 0;
    z-index: 1;
    background: #f8f8f8;
  }

 .fix-column{
     position: sticky;
      top: 0
     left: 0;
     z-index: 3;
     background: #f8f8f8;
   }
  .fix-rowHeader{
     position: sticky;
      top: 0
     left: 0;
     z-index: 2;
     background: #f8f8f8;
   }