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

Question

我在 angular 应用程序中使用 primeng p-table。在运行应用程序中，我的 table 如下所示：

在调整浏览器大小时 window（比如减小 window 的宽度），table headers 和数据是 overlapped.See 下面的屏幕截图：

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

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

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

您对上述解决方法的看法。 Link 已实施上述解决方法：

I have tried this, workaround using CSS

Answer 1

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

th, td{
    overflow: hidden;
}

或者如果你想在任何字符处断开单词以防止溢出，你可以使用断字。

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

对于水平滚动添加：

th, td {
    overflow-x: auto;
}

Answer 2

primeng table 是一个功能齐全的组件，主题二可以解决这个问题，列大小调整，因此取决于用户偏好可以更改列宽以查看额外信息，另一个是响应式的，因此 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" 将列设置为可调整大小并设置列的初始状态，主要问题是调整大小发生在运行时间所以我们将设置初始状态具有 table 状态特征的列大小

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

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

primeng table p-table column and data overlapping issue on browser window resizing

primeng

angular