Jsf 设置p:dataTable p:列宽

我正在尝试设置数据表的列宽。我已经看了这个问题的答案

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

例如，它不应该像这样

----------------------------- | This is some text | ----------------------------- --------------------- | This is some text | --------------------- ----------------------------- |这是一些文本| ----------------------------- 应该是这样的

----------------------------- | This is some text | ----------------------------- --------------------- | This is some text | --------------------- --------------------- |这是一些文本| --------------------- 如果有多行，coulmn应该与最宽的元素一样大。

我总是使用

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

---

并且做了我认为您希望datatable做的事情。

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

tableStyle="table-layout: auto;"

---

Maco的回答很有魅力。但是，对于那些数据列和标题未对齐的用户，一种解决方案是使用所需的

最小宽度属性为每个
添加样式（注意
的所有
）。在css中定义样式类并在
中使用styleClass属性引用它可能更实际。这样，如果您决定更改最小宽度，则只需在一个位置进行更改

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


...

在PF 5.3中进行测试
tableStyle=“width:auto！important；”此更改宽度标题也可以
@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>



这将如下所示：

-----------------------------------------------------------------------------------------
|        Text        |   Some more Text   | Text | Some more Text |      Remainder      |
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
|文本|更多文本|文本|更多文本|剩余|
-----------------------------------------------------------------------------------------
这也适用于
。我在Chrome 84和IE 11上测试了这两个组件的解决方案。
如何强制页眉和分页器具有相同的宽度？这是我想要的方式，除了列和页眉不再对齐。此处相同。你能修复它吗？这里也一样…标题和列不再对齐setting
tableStyle={{width:'auto'}}
使用react包装器对我有效，而setting
autoLayout={true}
没有，尽管后者是文档中描述的方法。除了列和标题不再对齐之外，这是我想要的方式。您还可以将以下内容添加到您自己的自定义.css文件中，以覆盖默认的Primefaces样式，该样式使标题居中，默认情况下居中：。ui datatable thead th，.ui datatable tfoot td{text align:left！important；}@Kukeltje我可以看到它正在PF 3.0文档中使用，所以至少在该版本中，如果不是以前的话。@Kukeltje我可以向您保证它可以与5.3一起使用。我之所以使用3.0，是因为我检查了目前在他们的网页上发布的最老的文档是否可以使用3.0，如果它造成混乱，我很抱歉。