html - CSS 固定了表格中的左列

Question

我看过这个重大话题how do I create an HTML table with fixed/frozen left column and scrollable body?我尝试适应，但由于我使用 thead 和 tbody 标签而我经常失败，但这些示例都没有。

thead 由月份中的几天组成，tbody 包含雇主姓名。

<table>
  <thead>
    <tr>
      <th></th>
      <th>01 July</th>
      <th>02 July</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Employee 1</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Employee 2</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

我需要在水平滚动时固定包含雇主姓名的 td。

JSFiddle example

Answer 1

您可以使用 position:fixed

实现此目的(完全使用您在问题中给出的标记)

table {
position: relative;
left: -10px;
}

thead tr th:nth-of-type(1),
tbody tr td:nth-of-type(1) {
display: block;
position: fixed;
z-index: 6;
width: 100px;
height: 20px;
background-color: rgb(255,255,255);
}

th, td:nth-of-type(n+2) {
min-width: 80px;
text-align:center;
}

th:nth-of-type(2),
td:nth-of-type(2) {
padding-left: 104px;
}

<table class="table table-hover">
  <thead>
    <tr>
      <th></th>
      <th>01 July</th>
      <th>02 July</th>
      <th>03 July</th>
      <th>04 July</th>
      <th>05 July</th>
      <th>06 July</th>
      <th>07 July</th>
      <th>08 July</th>
      <th>09 July</th>
      <th>10 July</th>
      <th>11 July</th>
      <th>12 July</th>
      <th>13 July</th>
      <th>14 July</th>
      <th>15 July</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Employee 1</td>
      <td></td>
      <td></td>
      <td></td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Employee 2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td>Vacation</td>
    </tr>
  </tbody>
</table>