html - PrimeNG 表未采用 Angular 中的固定宽度

Question

我正在尝试修复 primeNG 表中第一列的宽度，但它以某种方式覆盖了我的 CSS，即使它在检查元素时显示。
基本上，我正在寻找 CSS，通过更改选项卡，无论所有列的大小如何，表格的第一列都将具有固定宽度。
我尝试通过为第一个 child 定义固定宽度来尝试以下方法，但它采用的是基于宽度:100%。

在上图中，即使定义了 100 像素，您也可以看到大小为 368。
当我更改选项卡时，即使 100px 是固定的，宽度也会变为 920。

有什么方法可以定义固定宽度 100px 并具有表格宽度:100%，因为我不想破坏响应能力？
以下是可重现的示例供引用:
https://stackblitz.com/edit/primeng-tablescroll-demo-wtpbny

Answer 1

我有我的一个元素所需的解决方案。
您应该执行以下步骤:

为您想要的列设置宽度

按照primeng设置水平滚动documentation , 在水平滚动部分:

Horizontal Scroll:In horizontal scrolling, it is required to give fixed widths to columns. In general when customizing the column widths of scrollable tables, use colgroup as below to avoid misalignment issues as it will apply both the header, body and footer sections which are different separate elements internally.

这是直播 example包括仅用于第一列的固定大小和响应表。
这是唯一的解决方案(为您的表格设置固定大小)，因为如果您在移动设备中将宽度设置为 100%，可能并非所有列都会显示或重叠，从而破坏响应能力。