如何在用户滚动时使该表格保持粘性?

问题描述 投票:0回答:1

我需要修复标题上的内容。我的意思是,一旦您滚动经过标题,它就会保留在屏幕上,直到下一个表格。我尝试添加position:sticky和top:0,但它仍然滚动过去。我查找了可能妨碍的溢出,但找不到任何溢出。还有其他方法可以做到这一点吗?

                  <tr>
                    <ng-container *ngFor="let year of years; let yearIdx=index;">
                      <th class="table-header" [ngClass]="{'odd': yearIdx % 2 == 1}">
                        {{year}}
                      </th>
                    </ng-container>
                  </tr>
                  <ng-container
                    *ngFor="let equip of getEquip(category); let first=first; let last=last; let index=index;">
                    <tr>
                      <ng-container *ngFor="let year of years; let yearIdx = index;">
                        <td class="table-contents equip-cell">

                          <ng-container>
                            <i class="material-icons equip-present">check_circle</i>
                            <span
                              *ngIf="getItem(equip.equipment) > 0 && getItems(equip.equipment) < 1">
                              {{getItem(equip.equipment) | percent: '1.1-1':
                              'pt'}}
                            </span>
                          </ng-container>
                          <ng-container *ngIf="this.filter.grouping === 'VERSION'">
                            <i class="material-icons equip-present"
                             >check_circle</i>
                            <i class="material-icons equip-not-present"
                              *ngIf="getItem(equip.equipment)">close</i>
                          </ng-container>

                        </td>
                      </ng-container>
                    </tr>
                  </ng-container>
                </table>
css angular position
1个回答
0
投票

您无法将

<thead>
<tr>
设为粘性,但可以将
<th>
设为粘性。

这是改编自https://css-tricks.com/position-sticky-and-table-headers的示例:

table {
  position: relative;
}
th, td {
  padding: 0.25rem;
}
tr.red th {
  background: red;
  color: white;
}
tr.green th {
  background: green;
  color: white;
}
th {
  background: white;
  position: sticky;
  top: 0;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
<table>
    <tr class="red">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
    <tr>
      <td>Lorem.</td>
      <td>Ullam.</td>
      <td>Vel.</td>
      <td>At.</td>
      <td>Quis.</td>
    </tr>
    <tr>
      <td>Quas!</td>
      <td>Velit.</td>
      <td>Quisquam?</td>
      <td>Rerum?</td>
      <td>Iusto?</td>
    </tr>
    <tr>
      <td>Voluptates!</td>
      <td>Fugiat?</td>
      <td>Alias.</td>
      <td>Doloribus.</td>
      <td>Veritatis.</td>
    </tr>
    <tr>
      <td>Maiores.</td>
      <td>Ab.</td>
      <td>Accusantium.</td>
      <td>Ullam!</td>
      <td>Eveniet.</td>
    </tr>
    <tr>
      <td>Hic.</td>
      <td>Id!</td>
      <td>Officiis.</td>
      <td>Modi!</td>
      <td>Obcaecati.</td>
    </tr>
    <tr>
      <td>Soluta.</td>
      <td>Ad!</td>
      <td>Impedit.</td>
      <td>Alias!</td>
      <td>Ad.</td>
    </tr>
    <tr>
      <td>Expedita.</td>
      <td>Quo.</td>
      <td>Exercitationem!</td>
      <td>Optio?</td>
      <td>Ipsum?</td>
    </tr>
    <tr>
      <td>Commodi!</td>
      <td>Rem.</td>
      <td>Aspernatur.</td>
      <td>Accusantium!</td>
      <td>Maiores.</td>
    </tr>
    <tr>
      <td>Omnis.</td>
      <td>Cumque?</td>
      <td>Eveniet!</td>
      <td>Mollitia?</td>
      <td>Vero.</td>
    </tr>
    <tr>
      <td>Error!</td>
      <td>Inventore.</td>
      <td>Quasi!</td>
      <td>Ducimus.</td>
      <td>Repudiandae!</td>
    </tr>
    <tr>
      <td>Dolores!</td>
      <td>Necessitatibus.</td>
      <td>Corrupti!</td>
      <td>Eum.</td>
      <td>Sunt!</td>
    </tr>
    <tr>
      <td>Ea.</td>
      <td>Culpa?</td>
      <td>Quam?</td>
      <td>Nemo!</td>
      <td>Sit!</td>
    </tr>
    <tr>
      <td>Veritatis!</td>
      <td>Facilis.</td>
      <td>Expedita?</td>
      <td>Ipsam!</td>
      <td>Omnis!</td>
    </tr>
    <tr>
      <td>Vitae.</td>
      <td>Cumque.</td>
      <td>Repudiandae.</td>
      <td>Ut?</td>
      <td>Sed!</td>
    </tr>
    <tr>
      <td>Accusantium.</td>
      <td>Adipisci.</td>
      <td>Sit.</td>
      <td>Maxime.</td>
      <td>Harum.</td>
    </tr>
    </table>
    
    <h4>The next table...</h4>
    
    <table>
    <tr class="green">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
    <tr>
      <td>Qui!</td>
      <td>Accusamus?</td>
      <td>Minima?</td>
      <td>Dolorum.</td>
      <td>Molestiae.</td>
    </tr>
    <tr>
      <td>Vero!</td>
      <td>Voluptatum?</td>
      <td>Ea?</td>
      <td>Odit!</td>
      <td>A.</td>
    </tr>
    <tr>
      <td>Debitis.</td>
      <td>Veniam.</td>
      <td>Fuga.</td>
      <td>Alias!</td>
      <td>Recusandae!</td>
    </tr>
    <tr>
      <td>Aperiam!</td>
      <td>Dolorum.</td>
      <td>Enim.</td>
      <td>Sapiente!</td>
      <td>Suscipit?</td>
    </tr>
    <tr>
      <td>Consequuntur.</td>
      <td>Doloremque.</td>
      <td>Illum!</td>
      <td>Iste!</td>
      <td>Sint!</td>
    </tr>
    <tr>
      <td>Facilis.</td>
      <td>Error.</td>
      <td>Fugiat.</td>
      <td>At.</td>
      <td>Modi?</td>
    </tr>
    <tr>
      <td>Voluptatibus!</td>
      <td>Alias.</td>
      <td>Eaque.</td>
      <td>Cum.</td>
      <td>Ducimus!</td>
    </tr>
    <tr>
      <td>Nihil.</td>
      <td>Enim.</td>
      <td>Earum?</td>
      <td>Nobis?</td>
      <td>Eveniet.</td>
    </tr>
    <tr>
      <td>Eum!</td>
      <td>Id?</td>
      <td>Molestiae.</td>
      <td>Velit.</td>
      <td>Minima.</td>
    </tr>
    <tr>
      <td>Sapiente?</td>
      <td>Neque.</td>
      <td>Obcaecati!</td>
      <td>Earum.</td>
      <td>Esse.</td>
    </tr>
    <tr>
      <td>Nam?</td>
      <td>Ipsam!</td>
      <td>Provident.</td>
      <td>Ullam.</td>
      <td>Quae?</td>
    </tr>
    <tr>
      <td>Amet!</td>
      <td>In.</td>
      <td>Officia!</td>
      <td>Natus?</td>
      <td>Tempore?</td>
    </tr>
    <tr>
      <td>Consequatur.</td>
      <td>Hic.</td>
      <td>Officia.</td>
      <td>Itaque?</td>
      <td>Quasi.</td>
    </tr>
    <tr>
      <td>Enim.</td>
      <td>Tenetur.</td>
      <td>Asperiores?</td>
      <td>Eos!</td>
      <td>Libero.</td>
    </tr>
    <tr>
      <td>Exercitationem.</td>
      <td>Quidem!</td>
      <td>Beatae?</td>
      <td>Adipisci?</td>
      <td>Accusamus.</td>
    </tr>
    <tr>
      <td>Omnis.</td>
      <td>Accusamus?</td>
      <td>Eius!</td>
      <td>Recusandae!</td>
      <td>Dolor.</td>
    </tr>
    <tr>
      <td>Magni.</td>
      <td>Temporibus!</td>
      <td>Odio!</td>
      <td>Odit!</td>
      <td>Voluptatum?</td>
    </tr>
    <tr>
      <td>Eum.</td>
      <td>Animi!</td>
      <td>Labore.</td>
      <td>Alias!</td>
      <td>Fuga.</td>
    </tr>
    <tr>
      <td>Quia!</td>
      <td>Quis.</td>
      <td>Neque?</td>
      <td>Illo.</td>
      <td>Ad.</td>
    </tr>
    <tr>
      <td>Officiis.</td>
      <td>Exercitationem!</td>
      <td>Adipisci?</td>
      <td>Officiis?</td>
      <td>In?</td>
    </tr>
    <tr>
      <td>Voluptates?</td>
      <td>Voluptatum.</td>
      <td>Nihil.</td>
      <td>Totam?</td>
      <td>Quisquam!</td>
    </tr>
</table>

© www.soinside.com 2019 - 2024. All rights reserved.