jsf - 设置 p:dataTable p:列宽

Question

我正在尝试设置数据表的列宽。我已经查看了这个问题的答案How to set width of ap:column in ap:dataTable in PrimeFaces 3.0? .

然而，我正在尝试做一些不同的事情。我只希望该列与它显示的最宽元素一样宽。我的大部分数据都是文本。

例如，它不应该是这样的

-----------------------------------------
| 这是一些文字 |
-----------------------------------------

它应该看起来像这样

---------------------
| 这是一些文字 |
---------------------

如果有多行，则列应该与最宽的元素一样大。

Answer 1

我总是用

<p:dataTable ........ tableStyle="width:auto">

并且做我认为你期望你的数据表做的事情。

Answer 2

如果您希望表格宽度保持 100%，请使用

tableStyle="table-layout: auto;"

Answer 3

@Szarpul 的回答很好。我扩展了它，以便您可以拥有固定的列，调整其宽度的列和占据其余部分的列。

对于固定宽度，将宽度属性设置为所需的宽度。对于灵活宽度，将其设置为大于 0 的任何值。如果内容的宽度较长，它将增长到最长元素的宽度。样式可防止文本在每个空格处换行。对于占用剩余空间的列，不要定义宽度。您甚至可以使用更多没有宽度的列，然后它们将平均分配剩余空间。

这是一个例子：

<p:dataTable tableStyle="table-layout: auto;">
    <p:column width="300" headerText="Text" />
    <p:column width="300" headerText="Some more Text" />
    <p:column width="1" headerText="Text" style="white-space: nowrap;"/>
    <p:column width="1" headerText="Some more Text" style="white-space: nowrap;"/>
    <p:column headerText="Remainder" />
</p:dataTable>

这将如下所示：

-------------------------------------------------- --------------------------------------
| 正文 | 更多文字 | 正文 | 更多文字 | 剩余 |
-------------------------------------------------- --------------------------------------

这也适用<p:treeTable>。我在 Chrome 84 和 IE 11 上测试了这两个组件的解决方案。

Answer 4

Maco的回答就像一个魅力。然而，对于那些数据列和标题变得不对齐的人，一种解决方案是为每个样式添加一个<p:column>具有所需min-width属性的样式（注意它必须对所有<p:column>的<p:dataTable>. 在您的 css 中定义一个样式类并使用<p:column>. 这样，如果您决定更改最小宽度，您只需在一个地方进行更改。

<p:column style="min-width: 100px;">
...
</p:column>

在 PF 5.3 中测试

Answer 5

tableStyle="width: auto !important;" 这也改变了宽度标题