我正在尝试设置数据表的列宽。我已经查看了这个问题的答案How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?。
然而，我正在尝试做一些不同的事情。我只希望该列与它显示的最宽元素一样宽。我的大部分数据都是文本。
例如，它不应该是这样的
----------------------------------------- |这是一些文字 | -----------------------------------------应该是这样的
--------------------- |这是一些文字 | ---------------------如果有多行，列应该和最宽的元素一样大。
【问题讨论】：
标签： jsf primefaces datatable width
我一直用
<p:dataTable ........ tableStyle="width:auto">
并且做我认为你期望你的数据表做的事情。
【讨论】：
tableStyle={{width: 'auto'}} 对我使用反应包装器和设置 autoLayout={true} 没有，即使后者是文档中描述的方法。
如果您希望表格宽度保持 100%，请使用
tableStyle="table-layout: auto;"
【讨论】：
Maco 的回答很有魅力。但是，对于那些数据列和标题未对齐的人，一种解决方案是为每个 <p:column> 添加一个样式，并使用所需的 min-width 属性（注意，对于 <p:dataTable> 的所有 <p:column>，它必须相同） .在你的 CSS 中定义一个样式类并使用<p:column> 中的 styleClass 属性来引用它可能更实用。这样，如果您决定更改最小宽度，您只需在一处更改即可。
<p:column style="min-width: 100px;">
...
</p:column>
在 PF 5.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 上测试了这两个组件的解决方案。
【讨论】：
tableStyle="width: auto !important; " 这也改变了标题的宽度
【讨论】：