primeng table：可滚动启用时p表行分组宽度不起作用

Question

我正在使用带有angular的primeng表。以下是使用table的代码：

<p-table [value]="cars" dataKey="brand" [scrollable]="'true'" scrollHeight="400px">
    <ng-template pTemplate="header">
        <tr>
            <th style="width:50px">Vin</th>
            <th style="width:50px"> Year</th>
            <th style="width:100px"> Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template  pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata2[rowData.brand].index === rowIndex">
            <td colspan="4">
                <a href="#" [pRowToggler]="rowData">
                    <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                    <span>{{rowData.brand}}</span>
                </a>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex">
        <tr>
            <td>{{rowData.vin}}</td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.brand}}</td>
            <td>{{rowData.color}}</td>
        </tr>
    </ng-template>
</p-table>

您可以看到上面的代码，我想使用具有可滚动属性的行组。在运行应用程序时，我发现宽度不起作用（标题宽度仅在起作用）。下面是正在运行的应用程序的UI：

如果我从表格中删除[scrollable]属性，那么宽度可以在以下屏幕截图中看到：

Answer 1

p-table具有类ui-table，它是css属性table-layout: fixed。这是您得到默认结果的结果。

要根据宽度获得结果，您需要具有table-layout: auto。

Demo

将p-table放在要使用的组件的CSS下方，

p-table::ng-deep .ui-table table {
  table-layout: auto !important;
}

编辑：

如果列值超过列宽，则为了使列宽变宽，请为word-break: break-all元素分配td。

Demo

Answer 2

我可以使用colgroup（带有columnresizable）来解决此问题。下面是我的最终代码。

  def currency(x, pos):
        #The two args are the value and tick positions
    if x >= 1e6:
        s = '£{:1.1f}M'.format(x*1e-6)
    else:
        s = '£{:1.0f}K'.format(x*1e-3)
    return s
formatter = FuncFormatter(currency)

#REVENUE BY RESERVATION SOURCE
fig0, ax0 = plt.subplots(figsize=(20,15))
ax0.barh(Rev_by_reservation_source_oct_10['reservationSource'], Rev_by_reservation_source_oct_10['Revenue'])
labels = ax0.get_xticklabels()
plt.setp(labels, horizontalalignment='right')
ax0.set(title='Revenue by Reservation Source 10th Oct', xlabel='Revenue', ylabel='Reservation Source')
formatter = FuncFormatter(currency)
ax0.xaxis.set_major_formatter(formatter)
plt.style.use('fivethirtyeight')