首页 > 解决方案 > PrimeNG:在 p-table 中,水平条位于未冻结视图中的正文和页脚之间

问题描述

.ui-table .ui-table-frozen-view .ui-table-tbody > tr > td,
.ui-table .ui-table-unfrozen-view .ui-table-tbody > tr > td {
    height: 24px !important;
}
<h3>Frozen Column Groups</h3>
<div style="width:800px">
    <p-table [value]="sales" [scrollable]="true" scrollHeight="200%" frozenWidth="200px" >
        <ng-template pTemplate="frozencolgroup">
            <colgroup>
                <col style="width:200px;">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="colgroup">
            <colgroup>
                <col style="width:80px;">
                <col style="width:80px;">
                <col style="width:80px;">
                <col style="width:80px;">
                <col style="width:80px;">
                <col style="width:80px;">
                <col style="width:80px;">
                <col style="width:80px;">
            </colgroup>
            </ng-template>
        <ng-template pTemplate="frozenheader">
            <tr>
                <th style="height:84px">Brand</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="frozenbody" let-sale>
            <tr>
                <td>{{sale.brand}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="frozenfooter" let-sale>
            <tr>
                <td>One</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th colspan="8">Sale Rate</th>
            </tr>
            <tr>
                <th colspan="2">Sales</th>
                <th colspan="2">Profits</th>
                <th colspan="1">A</th>
                <th colspan="1">B</th>
                <th colspan="1">C</th>
                <th colspan="1">Profits</th>
            </tr>
            <tr>
                <th>Last </th>
                <th>This </th>
                <th>Last </th>
                <th>This </th>
                <th colspan="1">A</th>
                <th colspan="1">B</th>
                <th colspan="1">C</th>
                <th colspan="1">Profits</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-sale>
            <tr>
                <td>{{sale.lastYearSale}}</td>
                <td>{{sale.thisYearSale}}</td>
                <td>{{sale.lastYearProfit}}</td>
                <td>{{sale.thisYearProfit}}</td>
                <td>{{sale.lastYearSale}}</td>
                <td>{{sale.thisYearSale}}</td>
                <td>{{sale.lastYearProfit}}</td>
                <td>{{sale.thisYearProfit}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="footer" let-sale>
                <tr>
                    <td>One</td>
                </tr>
        </ng-template>
    </p-table>           

我正在使用primeng 6.0.0-beta.1.我创建了一个具有冻结和解冻视图的 p 表。我添加了frozenfooter 和普通的'footer'。问题是在解冻视图中,单杠位于正文和页脚之间。有人能告诉我如何让单杠出现在页脚之后吗?

我添加了frozenheader、frozenbody、frozenfooter 和普通页眉、正文、页脚

图片 在此处输入图像描述

标签: angularprimeng

解决方案


推荐阅读