减少 Primefaces 数据表中短内容列的大小

Question

我正在使用 Primefaces 6.2.17，我有一个数据表，基本上有两种类型的列：

• 包含非常短文本的列
• 可以包含可变长度文本的列，可以短也可以长

对于短文本的列，我想指定一个固定的大小。对于其他列，我希望它们占用剩余空间，使用每个单独列完全显示其内容（如果可能）所需的空间或显示其列标题所需的空间。但是，表格的宽度绝不能超过页面的宽度。

这是我当前的实现：

<p:dataTable id="myTab" widgetVar="myTab"
                     var="document"
                     tableStyle="table-layout: fixed; white-space: nowrap; width: 100%;"
                     .....
                     >

  <p:column headerText="Date" width="6%" style="text-align: center">
                    <h:outputText value="#{document.Date}"/>
  </p:column>
  <p:column headerText="Name">
                    <h:outputText value="#{document.name}"/>
  </p:column>
  <p:column headerText="Categorie">
                    <h:outputText value="#{document.categorie}"/>
  </p:column>
  <p:column headerText="Comment">
                    <h:outputText value="#{document.comment}"/>
  </p:column>
  <p:column headerText="Author" width="5%" style="text-align: center">
                    <h:outputText value="#{document.author}"/>
  </p:column>
  
  ...

</p:dataTable>

如您所见，我使用

width

的

p:column

属性来为那些具有短文本的列设置固定大小的列的大小。我没有为其他可变长度列设置任何内容。当前的实现使得剩余空间（对于非固定大小的列）在剩余列之间均匀分布，无论其内容的大小如何：

我想更改此设置，以便列的宽度仅达到显示或其内容所需的宽度，如下所示：

我怎样才能实现这个目标？

Answer 1

PrimeFaces 的

components.css

有

table-layout: fixed

，您通过

tableStyle

属性显式指定相同的内容，因此表格以固定宽度渲染。将

table-layout

更改为

auto

。

<p:dataTable ..... tableStyle="table-layout: auto;.....">......</p:dataTable>