设置 p:dataTable p:列宽

Posted 2023-02-22

【中文标题】设置 p:dataTable p:列宽

【英文标题】：Set p:dataTable p:column width

【发布时间】：2013-09-15 22:10:07

【问题描述】：

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

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

例如，它不应该是这样的

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

应该是这样的

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

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

【参考方案1】：

我一直用

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

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

【讨论】：

如何强制页眉和分页器具有相同的宽度？

这按我想要的方式工作，只是列和标题不再对齐。

这里也一样。你能修好吗？

这里相同...标题和列不再对齐

设置 tableStyle=width: 'auto' 对我使用反应包装器和设置 autoLayout=true 没有，即使后者是文档中描述的方法。

【参考方案2】：

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

tableStyle="table-layout: auto;"

【讨论】：

这按我想要的方式工作，只是列和标题不再对齐。

您还可以将以下内容添加到您自己的自定义 .css 文件中，以覆盖默认居中标题的 Primefaces 样式，默认情况下居中：.ui-datatable thead th, .ui-datatable tfoot td 文本对齐：左！重要；

【参考方案3】：

Maco 的回答很有魅力。但是，对于那些数据列和标题未对齐的人，一种解决方案是为每个 <p:column> 添加一个样式，并使用所需的 min-width 属性（注意，对于 <p:dataTable> 的所有 <p:column>，它必须相同） .在你的 CSS 中定义一个样式类并使用<p:column> 中的 styleClass 属性来引用它可能更实用。这样，如果您决定更改最小宽度，您只需在一处更改即可。

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

在 PF 5.3 中测试

【讨论】：

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

@Kukeltje 我可以向你保证它适用于 5.3。我放 3.0 是因为我检查了他们网页上当前发布的最古老的文档中是否有可能，如果造成混乱，请见谅。

【参考方案4】：

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

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

这是一个例子：

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

这将如下所示：

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

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

【参考方案5】：

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