CSS3固定标头表会干扰悬停元素

Question

我正在使用Javascript制作带有固定标题的表，并且效果很好。但是我在表格正文最后一列中的悬停图标遇到问题，当我向下滚动时，我无法单击表格标题最后一列中的悬停图标，因为标题下的表格行的图标突然出现。

我已经尝试过更改表头的z-index，但是它没有任何改变。

document.getElementById("wrap").addEventListener("scroll", function() {
  var translate = "translate(0," + this.scrollTop + "px)";
  this.querySelector("thead").style.transform = translate;
});

.table-parent {
  overflow-y: auto;
  margin-top: 25px;
  height: 500px;
}

table {
  width: 100%;
  min-width: 800px;
  overflow-x: auto;
}

thead {
  background: #708F9C;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1.25rem;
  transition: transform 0s !important;
}

thead,
thead tr,
thead th {
  z-index: 1;
}

tbody {
  z-index: 0;
  font-size: 1rem;
  max-height: calc(100vh - 200px);
}

td,
th {
  padding: 15px 20px;
}

thead tr {
  background: inherit;
}

tr {
  background: #EBEBEB;
}

td {
  border-bottom: 1px solid #DADADA;
}

tr td:last-child {
  opacity: 0;
  transition: opacity 0.25s;
  text-align: center;
}

tr td:last-child i {
  padding-left: 5px;
  padding-right: 5px;
  z-index: 0;
}

tbody tr:hover {
  background: #FAFAFA;
  transition: none;
  cursor: pointer;
}

tr:hover td:last-child {
  opacity: 1;
}

th:first-child {
  border-top-left-radius: 10px;
}

th:last-child {
  border-top-right-radius: 10px;
}

td:first-child,
th:first-child {
  padding-left: 15px;
}

td:last-child,
th:last-child {
  padding-right: 0;
}

tr:last-child td {
  border-bottom: none;
}

tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

th:last-child {
  text-align: center;
}

.table-style-selector {
  color: #FFF;
  padding-right: 10px;
  cursor: pointer;
  transition: none;
}

.table-style-selector.active {
  color: #DFDFDF;
}

.table-style-selector:hover {
  color: #EFEFEF;
}

table.medium td,
table.medium th {
  padding: 10px 15px;
}

table.small td,
table.small th {
  padding: 5px 10px;
}

Here's the code: ```
<div class="table-parent" id="wrap">
  <table>
    <thead>
      <tr>
        <th>Kunde</th>
        <th>Auftragsbeschreibung</th>
        <th>Bestellnummer</th>
        <th>
          <i onclick="changeTableStyle(0)" class="table-style-selector table-style-selector-0 fas fa-th-large active"></i>
          <i onclick="changeTableStyle(1)" class="table-style-selector table-style-selector-1 fas fa-th-list"></i>
          <i onclick="changeTableStyle(2)" class="table-style-selector table-style-selector-2 fas fa-th"></i>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ferchau Gmbh (Bremen)</td>
        <td>Change Workshop 13.-14. August 19</td>
        <td></td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>Haufe Akademie</td>
        <td>Change Seminar offen Berlin Juli 19</td>
        <td></td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>Haufe Akademie</td>
        <td>Haufe Trainertreffen 12.7.19</td>
        <td></td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
      <tr>
        <td>herwig consulting GmbH</td>
        <td>Pluss V1</td>
        <td>19051001</td>
        <td>
          <i class="text text-info fas fa-pen" data-toggle="tooltip" data-placement="top" title="Auftrag bearbeiten"></i>
          <i class="text text-warning fas fa-archive" data-toggle="tooltip" data-placement="top" title="Auftrag archivieren"></i>
          <i class="text text-danger fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Auftrag löschen"></i>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我不希望标题下面的图标可见并且不影响悬停时的标题。

Answer 1

这有点奇怪，因为您所有的元素实际上都是相对位置 您可以使用以下

table { 
  position: relative;
  padding-top: 55px; 
}

thead { 
  position: absolute;
  width: 100%;
  top: 0; 
}

问题是您需要手动设置列宽。

https://jsfiddle.net/w6teknf7/