内联样式

Question

我有一个PrimeNg表，该表中的每个项目都有一个扩展行。

展开的行应包含带有数据的表

这是模板的代码。

<div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
<div class="col-12 text-right mb-2">
    <button class="btn btn-primary" (click)="createOrEditLandlordPropertyPortfolioModal.show()">
        <i class="fa fa-plus"></i> {{ l('Add') }}
    </button>
</div>
<p-table
    #dataTable
    (onLazyLoad)="getLandlordPropertyPortfolios($event)"
    [value]="primengTableHelper.records"
    rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
    [paginator]="false"
    [lazy]="true"
    dataKey="id"
    [scrollable]="true"
    ScrollWidth="100%"
    [responsive]="primengTableHelper.isResponsive"
    [resizableColumns]="primengTableHelper.resizableColumns"
>
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 20px"></th>
            <th style="width: 130px">
                {{ l('Actions') }}
            </th>
            <th style="width: 130px" pSortableColumn="id">
                {{ l('Id') }}
                <p-sortIcon field="id"></p-sortIcon>
            </th>
            <th style="width: 150px" pSortableColumn="name">
                {{ l('Name') }}
                <p-sortIcon field="name"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-record let-expanded="expanded">
        <tr>
            <td style="width: 10px">
                <a [pRowToggler]="record">
                    <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                </a>
            </td>
            <td
                style="width: 130px"
                [hidden]="
                    !isGrantedAny(
                        'Pages.LandlordPropertyPortfolios.Edit',
                        'Pages.LandlordPropertyPortfolios.Delete'
                    )
                "
            >
                <div class="btn-group dropdown" dropdown container="body">
                    <button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
                        <i class="fa fa-cog"></i><span class="caret"></span> {{ l('Actions') }}
                    </button>
                    <ul class="dropdown-menu" *dropdownMenu>
                        <li>
                            <a
                                href="javascript:;"
                                (click)="createOrEditLandlordPropertyPortfolioModal.show(record.id)"
                                >{{ l('Edit') }}</a
                            >
                        </li>
                        <li>
                            <a href="javascript:;" (click)="deleteReasonModal.show(record)">{{ l('Delete') }}</a>
                        </li>
                    </ul>
                </div>
            </td>
            <td style="width: 130px">
                <span class="ui-column-title"> {{ l('Id') }}</span>
                {{ record.id }}
            </td>
            <td style="width: 150px">
                <span class="ui-column-title"> {{ l('Name') }}</span>
                {{ record.name }}
            </td>
        </tr>
    </ng-template>

    <!--Nested table for property portfolios-->
    <ng-template pTemplate="rowexpansion">
        <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
            <p-table
                #nestedTable
                [value]="primengTableHelper.records"
                rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                [paginator]="false"
                [lazy]="true"
                dataKey="id"
                [scrollable]="true"
                ScrollWidth="100%"
                [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
            >
                <ng-template pTemplate="header">
                    <tr>

                        <th style="width: 130px" pSortableColumn="id">
                            {{ l('PropertyAddress') }}
                            <p-sortIcon field="id"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('PostalCode') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('AgentName') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('Tenant') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('Status') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record let-expanded="expanded">
                    <tr>
                        <td style="width: 130px">
                            {{ record.properties.id}}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.postalCode }}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.agentName }}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.tenant }}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.status }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </ng-template>
</p-table>

我的问题是在扩展行中的p表没有100％的容器宽度

这是什么样子

如何使它适合父容器的100％宽度？

Answer 1

内联样式

尝试将以下内联CSS属性绑定添加到嵌套表中：

[tableStyle]="{'width.%': 100}"

单独的样式

或者，如果您不喜欢嵌入式样式，请尝试将其添加到关联的CSS文件中：

.expanded-table {
  width: 100%;
}

以及嵌套表的类：

[tableStyleClass]="'expanded-table'"

Answer 2

由于将行扩展模板的内容添加到表的内部，因此必须添加tr和td标签，如下所示：

[0],[1],[2]...

Answer 3

我能够这样解决使用colspan="4"属性

这是答案的代码

 <ng-template let-rowData pTemplate="rowexpansion" let-columns="columns">
        <tr>
            <td colspan="4">
                <p-table
                    #nestedTable
                    [value]="rowData.properties"
                    [tableStyle]="{ 'width.%': 100 }"
                    [scrollable]="true"
                    ScrollWidth="100%"
                >
                    <ng-template pTemplate="header">
                        <tr>
                            <th style="width: 130px" pSortableColumn="propertyAddress">
                                {{ l('PropertyAddress') }}
                                <p-sortIcon field="propertyAddress"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="postalCode">
                                {{ l('PostalCode') }}
                                <p-sortIcon field="postalCode"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="agentName">
                                {{ l('AgentName') }}
                                <p-sortIcon field="agentName"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="tenant">
                                {{ l('Tenant') }}
                                <p-sortIcon field="tenant"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="status">
                                {{ l('Status') }}
                                <p-sortIcon field="status"></p-sortIcon>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-record let-expanded="expanded">
                        <tr>
                            <td style="width: 130px">
                                {{ record.propertyAddress }}
                            </td>
                            <td style="width: 150px">
                                {{ record.postalCode }}
                            </td>
                            <td style="width: 150px">
                                {{ record.agentName }}
                            </td>
                            <td style="width: 150px">
                                {{ record.tenant }}
                            </td>
                            <td style="width: 150px">
                                {{ record.status }}
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </td>
        </tr>
    </ng-template>

PrimeNg扩展行容器的全宽

3 个答案:

内联样式

单独的样式