如何懸停第n個孩子的行

我試影像這樣構建這個表格
當我將滑鼠懸停在任何一行時，前兩個單元格無法懸停，即使我已經寫了 :hover for all trtags in body 幫助我，請幫助我，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 nhan 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 ngan hàng</th>
      <th class="align-left">chi nhánh tk ngan 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>

uj5u.com熱心網友回復：

您必須從這部分代碼中洗掉“背景顏色：白色”

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

或者，您可以將代碼的這一部分更改為此

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

uj5u.com熱心網友回復：

此規則具有更大的特殊性，因此首先應用并將 設定background-color為白色。

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

標籤：html css

上一篇：樣式化行內元素的中斷

下一篇：如何設定所有元素在全域樣式上具有0填充0邊距