primefaces 数据表样式？

Question

我想使用 primefaces 创建一个表格，但我的表格列的标题和正文的宽度不相等。我尝试为每一列添加style="width: inherit" 或style="width: 30%"，但表格标题和表格主体之间的宽度仍然不均匀。如果表格不可滚动但我想要一个可滚动的表格，它会很好地统一。 这是我的代码：

<h:panelGrid columns="1" class="plan-panel" columnClasses="label, value">
    <h:outputText class="deploy-label" value="Table 1"/>
    <p:dataTable var="service" value="aaaa"
                 id="service-table" scrollable="true" scrollHeight="250">
        <p:column headerText="Col1" width="20">
            <h:outputText value="test122222222222"/>
        </p:column>
        <p:column headerText="Col2" width="20">
            <h:outputText value="test255567y774"/>
        </p:column>
        <p:column headerText="Col3" width="20">
            <h:outputText value="test3433666"/>
        </p:column>
        <p:column headerText="Col4" width="20">
            <h:outputText value="test43364667"/>
        </p:column>
    </p:dataTable>

</h:panelGrid>

表格如下所示：

我想知道是否有人知道如何在此表上应用样式以使表的标题和正文宽度相等。

谢谢

Answer 1

在这种情况下，唯一的“好”答案是停止使用可滚动或使用较新的版本，因为 3.5 相当旧（6.0 已经发布）。这方面有很多变化/改进。

您可以尝试修补 CSS 或很可能是数据表的 js，但计算和对齐动态宽度相当麻烦。我怀疑有人会为你这样做。

您可以尝试的一件事是查看table-layout: fixed 在应用于两个表时的作用（查看源代码），然后可能像您一样或通过 css 为每列提供固定宽度

Answer 2

尝试在您的Column 示例中创建一个简单的width

<p:column headerText="Col2" width="20"><h:outputText value="test122222222222"/></p:column>

我尝试像那样更改它，它对我有用，确实，列香料非常小，但对我有用，希望有所帮助。