Скроллинг таблицы за липким заголовком виден - PullRequest
Новая
       18

Скроллинг таблицы за липким заголовком виден

1 голос
/ 10 апреля 2020

У меня есть таблица, и я хочу сделать заголовок таблицы липким. В моей таблице всего 5 столбцов. Проблема в том, что с добавлением CSS я добавил только 4-й и 5-й столбцы, которые являются липкими. Текст заголовка 1-го, 2-го и 3-го столбцов исправлен, и фон прокручивается, делая содержимое таблицы видимым, что приводит к перекрытию текста заголовка и содержимого таблицы при прокрутке.

Это мой 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 совершенно липкие.

1 Ответ

0 голосов
/ 14 апреля 2020

Я смог решить это, поставив свой после. По какой-то странной причине это работает.

...