浏览器窗口大小调整时的primeng table p-table列和数据重叠问题

Question

我在我的角度应用程序中使用primeng p-table。 在运行应用程序时，我的表格如下所示：

在调整浏览器窗口大小（比如减小窗口宽度）时，表头和数据重叠。请参见下面的屏幕截图：

您可以参考下面 stackblitz 链接中的代码来重现该问题：

stackblitz code link

我已经尝试了以下使用 css 的解决方法：

.ui-table-scrollable-header{  min-width: 300px !important;}
 .ui-table-scrollable-body{ min-width: 300px !important;}
 th{  word-break: break-all;}

您对上述解决方法有何看法。 与上述解决方法的链接：

I have tried this, workaround using CSS

Answer 1

primeng table是一个充满主题功能二的组件，可以解决这个问题， 列调整大小，因此取决于用户偏好可以更改列宽以查看额外信息，另一个是响应式的，因此表格可以支持像移动设备这样的小尺寸屏幕。

模板

<p-table [columns]="columnDefinitions" [value]="dataSet" [resizableColumns]="true" [responsive]="true">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pResizableColumn>
                {{col.name}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" class="ui-resizable-column">
                              <span class="ui-column-title">{{col.name}}</span>

                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Column Resize,responsive

查看直播demo ?

更新?

我们可以将列设置为可调整大小并使用这些选项设置列的初始状态[resizableColumns]="true" columnResizeMode="expand"，主要问题是在运行时调整大小，因此我们将使用表状态功能设置列大小的初始状态像这样

localStorage.setItem(
 'statedemo-local',
 '{"columnWidths":"250,200,400,250"}'
);

这将设置列的宽度大小，因为我们将调整大小设置为展开，我们将看到一个水平滚动条。

<p-table [columns]="columnDefinitions" [value]="dataSet" [resizableColumns]="true" columnResizeMode="expand" stateStorage="local" stateKey="statedemo-local">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pResizableColumn>
                {{col.name}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" class="ui-resizable-column">
                              <span class="ui-column-title">{{col.name}}</span>

                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

demo ??

Answer 2

你想在调整大小时发生什么？您可以使用 vw （视口宽度）设置字体大小以使字体在调整大小时增长/缩小，或者您可以将溢出属性设置为隐藏或滚动或您认为最适合的任何内容，例如将其添加到您的 css 文件：

th, td{
    overflow: hidden;
}

如果您想在任何字符处分词以防止溢出，也可以使用分词。

td, th{
    word-break: break-all;
}

横向滚动添加：

th, td {
    overflow-x: auto;
}