提问人：Agatha Garcia 提问时间：11/14/2023 更新时间：11/14/2023 访问量：28
当用户滚动时，如何使此表具有粘性？
How can I make this table sticky when the user scrolls?
问：
我需要修复标题上的内容。我的意思是，一旦你滚动过标题，它就会一直停留在屏幕上，直到下一个表格。我尝试添加 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>
答：
1赞
Moob
11/14/2023
#1
你不能做或粘，但你可以做粘。<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;
}
tr:nth-child(even){
background:#eee;
}
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>
</tr>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
</tr>
<tr>
<td>Quas!</td>
<td>Velit.</td>
<td>Quisquam?</td>
</tr>
<tr>
<td>Voluptates!</td>
<td>Fugiat?</td>
<td>Alias.</td>
</tr>
<tr>
<td>Maiores.</td>
<td>Ab.</td>
<td>Accusantium.</td>
</tr>
<tr>
<td>Hic.</td>
<td>Id!</td>
<td>Officiis.</td>
</tr>
<tr>
<td>Soluta.</td>
<td>Ad!</td>
<td>Impedit.</td>
</tr>
<tr>
<td>Expedita.</td>
<td>Quo.</td>
<td>Exercitationem!</td>
</tr>
<tr>
<td>Commodi!</td>
<td>Rem.</td>
<td>Aspernatur.</td>
</tr>
<tr>
<td>Omnis.</td>
<td>Cumque?</td>
<td>Eveniet!</td>
</tr>
<tr>
<td>Error!</td>
<td>Inventore.</td>
<td>Quasi!</td>
</tr>
<tr>
<td>Dolores!</td>
<td>Necessitatibus.</td>
<td>Corrupti!</td>
</tr>
<tr>
<td>Ea.</td>
<td>Culpa?</td>
<td>Quam?</td>
</tr>
<tr>
<td>Veritatis!</td>
<td>Facilis.</td>
<td>Expedita?</td>
</tr>
<tr>
<td>Vitae.</td>
<td>Cumque.</td>
<td>Repudiandae.</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>Adipisci.</td>
<td>Sit.</td>
</tr>
</table>
<h4>The next table...</h4>
<table>
<tr class="green">
<th>Name</th>
<th>Age</th>
<th>Job</th>
</tr>
<tr>
<td>Qui!</td>
<td>Accusamus?</td>
<td>Minima?</td>
</tr>
<tr>
<td>Vero!</td>
<td>Voluptatum?</td>
<td>Ea?</td>
</tr>
<tr>
<td>Debitis.</td>
<td>Veniam.</td>
<td>Fuga.</td>
</tr>
<tr>
<td>Aperiam!</td>
<td>Dolorum.</td>
<td>Enim.</td>
</tr>
<tr>
<td>Consequuntur.</td>
<td>Doloremque.</td>
<td>Illum!</td>
</tr>
<tr>
<td>Facilis.</td>
<td>Error.</td>
<td>Fugiat.</td>
</tr>
<tr>
<td>Voluptatibus!</td>
<td>Alias.</td>
<td>Eaque.</td>
</tr>
<tr>
<td>Nihil.</td>
<td>Enim.</td>
<td>Earum?</td>
</tr>
<tr>
<td>Eum!</td>
<td>Id?</td>
<td>Molestiae.</td>
</tr>
<tr>
<td>Sapiente?</td>
<td>Neque.</td>
<td>Obcaecati!</td>
</tr>
<tr>
<td>Nam?</td>
<td>Ipsam!</td>
<td>Provident.</td>
</tr>
<tr>
<td>Amet!</td>
<td>In.</td>
<td>Officia!</td>
</tr>
<tr>
<td>Consequatur.</td>
<td>Hic.</td>
<td>Officia.</td>
</tr>
<tr>
<td>Enim.</td>
<td>Tenetur.</td>
<td>Asperiores?</td>
</tr>
<tr>
<td>Exercitationem.</td>
<td>Quidem!</td>
<td>Beatae?</td>
</tr>
<tr>
<td>Omnis.</td>
<td>Accusamus?</td>
<td>Eius!</td>
</tr>
<tr>
<td>Magni.</td>
<td>Temporibus!</td>
<td>Odio!</td>
</tr>
<tr>
<td>Eum.</td>
<td>Animi!</td>
<td>Labore.</td>
</tr>
<tr>
<td>Quia!</td>
<td>Quis.</td>
<td>Neque?</td>
</tr>
<tr>
<td>Officiis.</td>
<td>Exercitationem!</td>
<td>Adipisci?</td>
</tr>
<tr>
<td>Voluptates?</td>
<td>Voluptatum.</td>
<td>Nihil.</td>
</tr>
</table>下一个：三位一体结 svg
评论