具有固定标题的CSS滚动表无法正常工作

Question

我有一个固定头长的滚动桌。滚动工作正常，我的问题是，当我滚动表格时，头部没有重叠，应该重叠。我显示有问题的图像。只有带有按钮的单元格有此问题。

这是表格的CSS：

.tableFixHead {
  overflow-y: auto;
  height: 60vh;
}

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead td {
  padding: 8px;
    padding-right: 0px;
    width: 30px;
    margin-right: -30px;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
}

和桌子：

<table>   
  <thead>
    <tr>
      <th></th>
      <th style="width:40%">Nome</th>
      <th style="width:20%">Contactado</th>
      <th style="width:20%">Último contacto</th>
      <th style="width:40%">
        <div class="checkbox">
          <label>
            <input type="checkbox" class="check" id="checkAll" checked=""> Todos
          </label>
        </div>
      </th>
    </tr>   
  </thead>   
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>      
      <td>
        <div class="form-group">
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch1" checked="">
            <label class="custom-control-label" for="customSwitch1">Enviar</label>
          </div>
        </div>
      </td>
    </tr>   
  </tbody> 
</table>