可见在粘性标题后面的表滚动

Question

我有一张桌子，我想让桌子的标题变粘。我的表中总共有5列。问题是，无论我添加了什么CSS，只有第4列和第5列都是粘性的。第一，第二和第三列的标题文本是固定的，并且背景滚动通过使表格的内容可见，滚动时导致标题文本和表格内容的重叠。

这是我的CSS类别

.itemtable {
grid-area: toolbar;
justify-self: stretch;
border-bottom: 1px solid gainsboro;
height: 6.4vh;
overflow: hidden;
align-self : center;
background: whitesmoke
}

 thead tr th {
position: sticky;
top: 0;
}

table {
border-collapse: collapse;
}

th {
border-bottom: 1px solid #d5d5d5;
background: #eef2f4;
text-align: left;
}

HTML代码：

<div class="itemtable">
      <div role="table body" class="table__body" style="height: 70vh;">
        <table>
          <thead>
            <tr>

              <th><b *ngIf="isDisabled">Type</b>
                <i id="nameSort" *ngIf="isDesc" class="desc"
                  (click)="viewType('desc','name')"></i>
                </th>
              <th>ID</th>
              <th>Name</th>
              <th>comments</th>
              <th>modified
                <i id="modified" *ngIf="isDesc" class="desc"
                  (click)="view()"></i>

              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of ResponseData; let i = index">
              <td style="width:20%">
                <span>{{data.tabletype}}</span>

              </td>
              <td style="width:20%">
                <span class="name-first" style="margin-left:15em"
                  (click)="getId(data)">

                </span>
              </td>
              <td style="width:20%">
                <span
                  {{data.Name}}
                </span>
              </td>
              <td style="width:30%">
                <font size="2" color="darkblue">{{data.name}}</font>&nbsp; <font size="2">
                  {{getLockedDated(data.lockDate)}}</font>
              </td>
              <td>
                {{ data.ModifiedDate }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

---

我在做什么错？此问题仅在前3列出现，而后2列完全粘滞。

Answer 1

我能够坚持不懈地解决它。由于某些奇怪的原因，它可以正常工作。