I trying to build this table like this
When I hover on any row, the first two cells can't hover even though I have written :hover for all tr tags in the body Help me pls, tks all!

.wrap-table {
    width: calc(100% - 40px);
    height: calc(100vh - 235px);
    overflow: auto;
    background-color: #fff;
    margin-left: 10px;
    padding-right: 20px;
}

.m-table {
    width: 100%;
    height: fit-content;
    background-color: #fff;
}
.m-table thead th{
    position: sticky;
    top: 0;
    background-color: #ECEEF1;
    padding-left: 10px;
    padding-right: 8px;
    text-align: left;
    height: 48px;
    border-bottom: 1px solid #c7c7c7;
    border-right: 1px solid #c7c7c7;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
}

td:first-child, th:first-child {
    position:sticky;
    left:0;
    z-index:1;
    background-color:white;
}

td:nth-child(2),th:nth-child(2)  { 
    position:sticky;
    left:37px;
    z-index:1;
    background-color:white;
}

td:nth-child(12),th:nth-child(12)  { 
    position:sticky;
    right: -20px;
    z-index:1;
    border-left: 1px solid #c7c7c7;
    background-color:white;
}

th:first-child , th:nth-child(2) , th:nth-child(12) {
    z-index:3
}

.m-table th {
    position: sticky;
    top: 0;
    background: #eee;
  }

.m-table tbody tr,td {
    height: 48px;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
}
.m-table tbody td {
    padding: 0;
    padding-left: 10px;
    padding-right: 8px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #c7c7c7;
    border-right: 1px dotted #c7c7c7;
}
.m-table tbody tr:hover {
    background-color: #F3F8F8;
}

.m-table tbody tr:active {
    background-color: #F4F5F6;
}

<table class="m-table" cellspacing="0">
  <thead>
    <tr>
      <th class="sticky">
        <input type="checkbox">
      </th>
      <th class="align-left sticky">MÃ NHÂN VIÊN</th>
      <th class="align-left" style="width: 175px">tên nhân viên</th>
      <th class="align-left">giới tính</th>
      <th class="align-center">ngày sinh</th>
      <th class="align-left" style="width: 150px">số cmnd</th>
      <th class="align-left" style="width: 150px">chức danh</th>
      <th class="align-left" style="width: 150px">tên đơn vị</th>
      <th class="align-left" style="width: 120px">số tài khoản</th>
      <th class="align-left">tên ngân hàng</th>
      <th class="align-left">chi nhánh tk ngân hàng</th>
      <th class="align-center sticky">chức năng</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="employee in employees" :key="employee.EmployeeId" :id="employee.EmployeeId">
      <th>
        <input type="checkbox">
      </th>
      <td class="sticky">NV0001</td>
      <td>David Luiz</td>
      <td>Male</td>
      <td class="align-center">
        01/01/1991
      </td>
      <td>376574567456</td>
      <td>Teacher</td>
      <td>School</td>
      <td>465745747</td>
      <td>Franch Bank</td>
      <td>Paris</td>
      <td class="sticky">
        <MOption />
      </td>
    </tr>
  </tbody>
</table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

you must remove "background-color: white" from this part of your code

td:nth-child(2),
th:nth-child(2) {
  position: sticky;
  left: 37px;
  z-index: 1;
  background-color: white;
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

or instead, you can change this part of your code to this

.m-table tbody tr:hover td {
  background-color: #f3f8f8;
}

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

This rule has greater specificity, so it applies first and sets the background-color to white.

td:nth-child(2),th:nth-child(2)  { 
    position:sticky;
    left:37px;
    z-index:1;
    background-color:white;
}