时间戳

首页 > 解决方案 > 在 Angular 中滚动浏览器页面时修复表头

html - 在 Angular 中滚动浏览器页面时修复表头

问题描述

我想在获得首页时以角度修复表格。当我在表格内滚动时，滚动标题正在修复，这种情况我使用粘性但当我滚动浏览器页面时它不起作用。咆哮一张我想要的图片

在此处输入图像描述

在 HTML 中

 <div class="table-responsive " style="width: 100%; height: 670px;">
    <!--<table class="table table-striped table-bordered">-->
    <table class="table table-hover info">
        <thead>
        <tr style="background-color: lightskyblue;">
            <th>ID</th>
            <!--<th jhiTranslate="jhiApp.kassa.date_enter">DateEnter</th>-->
            <th jhiTranslate="jhiApp.kassa.date_prov">DateProv</th>
            <th jhiTranslate="jhiApp.kassa.date_doc">DateDoc</th>
            <th jhiTranslate="jhiApp.kassa.num_doc">NumDoc</th>
            <th jhiTranslate="jhiApp.kassa.acc_db">AccDb</th>
            <th jhiTranslate="jhiApp.kassa.bank_db">BankDb</th>
            <th jhiTranslate="jhiApp.kassa.name_db">NameDb</th>
            <th jhiTranslate="jhiApp.kassa.acc_cr">AccCr</th>
            <th jhiTranslate="jhiApp.kassa.bank_cr">BankCr</th>
            <th jhiTranslate="jhiApp.kassa.name_cr">NameCr</th>
            <th jhiTranslate="jhiApp.kassa.currency">Currency</th>
            <th jhiTranslate="jhiApp.kassa.summa">Summa</th>
            <th jhiTranslate="jhiApp.kassa.summa_eq">SummaEq</th>
            <th jhiTranslate="jhiApp.kassa.purpose">Purpose</th>
            <th jhiTranslate="jhiApp.kassa.inn_db">InnDb</th>
            <th jhiTranslate="jhiApp.kassa.inn_cr">InnCr</th>
        </tr>
        </thead>
        <tbody *ngFor="let array of kassas">

        </tbody>
    </table>
</div>

在 CSS 中

thead th {
position: sticky;
top: 0;
background-color: lightskyblue;

}

标签： htmlcssangular

解决方案

你可以试试我的新 Angular 粘性库。我创建它是因为我错过了这样的功能并且没有解决方案对我有用。https://ngx-sticky-copy.netlify.app/这很简单，您只需在 tHead 上应用 *scStickyThead 指令即可。

推荐阅读