Question

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

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

因此，例如，它不应该像这样

-----------------------------
| This is some text         |
-----------------------------

看起来应该是这样的

---------------------
| This is some text |
---------------------

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

Answer 1

我总是使用

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

我认为你期望你的数据表能做什么。

Answer 2

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

tableStyle="table-layout: auto;"

Answer 3

Maco 的答案就像魅力一样。但是，对于数据列和标题未对齐的用户，一种解决方案是使用所需的var object = { justin: "500", linda: "3000", tom: "5000", jane: "5000" }, keys = Object.keys(object), max = keys.reduce(function (r, a, i) { if (!i || +object[a] > +object[r[0]]) { return [a]; } if (+object[a] === +object[r[0]]) { r.push(a); } return r; }, []); console.log(max);属性为每个<p:column>添加一种样式（请注意，对于所有min-width，它必须相同<p:column>）。在css中定义样式类并使用<p:dataTable>中的styleClass属性引用它可能更实际。这样，如果您决定更改最小宽度，则只需在一个位置更改它。

<p:column>

在PF 5.3中测试

Answer 4

@Szarpul的答案很好。我对其进行了扩展，以便您可以使用固定的列，可调整其宽度的列以及占用其余部分的列。

对于固定宽度，将width属性设置为所需的宽度。对于灵活宽度，请将其设置为大于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>

这看起来像这样：

-----------------------------------------------------------------------------------------
|        Text        |   Some more Text   | Text | Some more Text |      Remainder      |
-----------------------------------------------------------------------------------------

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

设置p：dataTable p：列宽

4 个答案: