设置p:dataTable p:column的宽度。

Question

我试图设置数据表的列宽。我查看了这个问题的答案PrimeFaces 3.0中如何在p:dataTable中设置p:column的宽度？。

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

例如，它不应该看起来像这样

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

它应该看起来像这样

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

如果有多行，则该列应该尽可能宽。

- user489041

Answer 1

我总是使用

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

它做了我认为你期望你的数据表应该做的事情。

- Maco

---

如何强制表头和分页器具有相同的宽度？ - Dominic Weiser

这个程序的功能符合我的要求，但是列和标题不再对齐。 - Jonathas Pacífico

一样的问题。你能修复它吗？ - Kevin Busch

同样的问题出现在这里...标题和列不再对齐。 - Ming

将tableStyle={{width: 'auto'}}设置在React包装器中对我起了作用，而设置autoLayout={true}则没有，尽管后者是文档中描述的方法。 - Marc Sloth Eastman

Answer 2

如果您想让表格宽度保持100％，请使用

tableStyle="table-layout: auto;"

- Szarpul

---

除了列和标题不再对齐，这个方法运行得很好。 - Jonathas Pacífico

您还可以将以下内容添加到自己的自定义.css文件中，以覆盖默认的Primefaces样式，该样式默认居中标题：.ui-datatable thead th，.ui-datatable tfoot td { text-align: left !important;
} - Fuzzy Analysis

Answer 3

Maco的答案非常有效。但是，对于那些数据列和标题不对齐的人来说，一个解决方案是在每个<p:column>中添加一个样式，并使用所需的min-width属性（请注意，所有<p:column>都必须相同）。可能更实用的方法是在CSS中定义一个样式类，并在<p:column>中使用styleClass属性引用它。这样，如果您决定更改最小宽度，只需在一个地方更改即可。

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

在 PF 5.3 中进行了测试

- CheshellCat

---

@Kukeltje，我可以看到它在PF 3.0文档中被使用，所以至少在那个版本中是这样，如果不是之前。 - CheshellCat

@Kukeltje 我可以向您保证它适用于5.3版本。我选择了3.0版本，是因为我在他们网站上最早发布的文档中检查到这是可能的，如果造成了困惑，我很抱歉。 - CheshellCat

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>

我将翻译如下：

这将看起来像这样：

-----------------------------------------------------------------------------------------
|        文本        |   更多文本   | 文本 | 更多文本 |      剩余部分      |
-----------------------------------------------------------------------------------------

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

- Hendrik

Answer 5

tableStyle="width: auto !important; " this change width headers also

的意思是“表格样式=宽度：自动！重要；”这将同时改变表头的宽度。

- I.Zhyvcnyn