p:dataTable p:列宽度

时间:2021-08-29 20:04:01

I am trying to set the column widths of my data table. I have looked at this question for an answer How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?.

我正在尝试设置数据表的列宽。我看了这个问题,想知道如何在PrimeFaces 3.0中设置p:列的宽度。

I am however trying to do something a little bit different. I only want the column to be as wide as the widest element it it is displaying. Most of my data is text.

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

So for example, it should not look like this

例如,它不应该是这样的

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

It should look like this

它应该是这样的

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

If there are multiple rows, the coulmn should be as large as the widest element.

如果有多行,库仑应该和最宽的元素一样大。

3 个解决方案

#1


37  

I always use

我总是用

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

And does what I think you expect your datatable to do.

并做我认为您期望您的datatable做的事情。

#2


29  

If you want the table width remain 100%, use

如果您希望表的宽度保持为100%,请使用

tableStyle="table-layout: auto;"

#3


0  

Maco's answer works like a charm. However, for those whose data columns and headers become unaligned, one solution is to add a style to each <p:column> with the desired min-width attribute (note it has to be the same for all <p:column> of the <p:dataTable>). It might be more practical to define a style class in your css and refer to it using styleClass attribute in <p:column>. In that way, if you decide to change the minimum width, you would only have to change it in one place.

Maco的回答很有魅力。但是,对于那些数据列和标头不对齐的用户,一个解决方案是将一个样式添加到每个 中,并使用所需的min-width属性(注意,所有 )的列>都是相同的。在css中定义一个样式类可能更实用,并在 中使用styleClass属性引用它。这样,如果你决定改变最小宽度,你只需要在一个地方改变它。

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

Tested in PF 5.3

测试在PF 5.3

#1


37  

I always use

我总是用

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

And does what I think you expect your datatable to do.

并做我认为您期望您的datatable做的事情。

#2


29  

If you want the table width remain 100%, use

如果您希望表的宽度保持为100%,请使用

tableStyle="table-layout: auto;"

#3


0  

Maco's answer works like a charm. However, for those whose data columns and headers become unaligned, one solution is to add a style to each <p:column> with the desired min-width attribute (note it has to be the same for all <p:column> of the <p:dataTable>). It might be more practical to define a style class in your css and refer to it using styleClass attribute in <p:column>. In that way, if you decide to change the minimum width, you would only have to change it in one place.

Maco的回答很有魅力。但是,对于那些数据列和标头不对齐的用户,一个解决方案是将一个样式添加到每个 中,并使用所需的min-width属性(注意,所有 )的列>都是相同的。在css中定义一个样式类可能更实用,并在 中使用styleClass属性引用它。这样,如果你决定改变最小宽度,你只需要在一个地方改变它。

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

Tested in PF 5.3

测试在PF 5.3