сделать первые 2 заголовка липкими - PullRequest
Новая
       12

сделать первые 2 заголовка липкими

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

У меня есть таблица с 2 заголовками, и я пытаюсь сделать оба заголовка липкими, с приведенной ниже кодировкой только верхний заголовок является липким. 

<div class="ft-table" style="overflow: scroll;height: 60vh;>
  <div role="table header" class="ft-table_header" style="position: sticky; top: 0px;">
    <div class="ft-tableactions">
      <a href="#add">ADD</a>
      <a href="#delete">Delete</a>
    </div>
  </div>
  <div role="table body" class="ft-table_body" style="min-height: 50vh;overflow: scroll;">
    <div class="ft-table-view">
      <table class="ft-table ft-table--is-hoverable">
        <thead>
          <tr>
            <th>
              <div class="ft-form-control">
                <label class="checkbox">
                  <span class="checkbox__icon"></span><span
                      class="checkbox__text"></span>
                </label>
              </div>
            </th>
            <th *ngFor="let column of displayedColumns">{{column}}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of backupData">
            <td>
              <div class="ft-form-control">
                <label class="checkbox">
                  <span class="checkbox__icon"></span><span
                      class="checkbox__text"></span>
                </label>
              </div>
            </td>
            <td *ngFor="let col of displayedColumns">
              <div class="ft-form-control">
                <div class="control__input-group">
                  <p *ngIf="checkIfCorrect(col)">{{getdata(data,col)}}</p>
                 </div>
                </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  </div>

Я дал встроенный CSS сделать первый заголовок липким style="position: sticky; top: 0px;". В классе CSS я добавил следующие строки, чтобы сделать 2-й ряд липким, но, к сожалению, он не работает. 

thead tr th {
position: sticky;
top: 25px;
}

Какое бы значение я ни указывал для top, оно не является липким. Что я делаю неправильно ? Есть ли другой способ сделать первые 2 заголовка липкими.

...