How to hover row with nth-child - html

Question

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>

Answer 1

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;
}
or instead, you can change this part of your code to this
.m-table tbody tr:hover td {
background-color: #f3f8f8;
}

Answer 2

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;
}