jsf - 将列的宽度调整为 p :dataTable 中的内容

Question

我希望表格的列将其宽度调整为最大元素。
就像双击一个excel列...

我已经尝试了很多其他问题的属性和解决方案，但没有真正做到我想要的。

这是我对嵌套在 p:scollPanel 中的 dataTable 的设置:

<p:dataTable scrollable="true" scrollWidth="auto" scrollHeight="390"
             tableStyle="width: auto; white-space: nowrap; font-size: smaller"
             id=carTable" var="vehicles"
             value="#{dgBean.vehicles}">

使用:

素面 6.0

jsf 2.2.1

更新:

我不知道为什么，但似乎没有使用 table-layout: auto 并且生成了两个 div。 1 用于我的表的标题，另一个用于我的表的主体。
这就是为什么我发布的第一个布局出现并且标题和正文很好地适合它们自己但标题不适合正文的原因。

生成的 HTML:

<div class="ui-widget-header ui-datatable-scrollable-header" style="width: 1199px;">
    <div class="ui-datatable-scrollable-header-box" style="margin-right: 15px;">
        <table role="grid">
            <thead id="j_idt5:j_idt14:carTable_head">...</thead>
        </table>
    </div>
</div>
<div class="ui-datatable-scrollable-body" tabindex="-1" style="height: 390px; margin-right: 0px; width: 1199px;">
    <table role="grid">
        <thead class="ui-datatable-scrollable-theadclone" style="height: 0px;">...</thead>
        <tbody id="j_idt5:j_idt14:carTable_data" class="ui-datatable-data ui-widget-content" tabindex="0">...</tbody>
    </table>
</div>

所以似乎生成了 2 个表。有谁知道如何使用 pf 解决这个问题？

来自评论的更新

申请

.ui-datatable-scrollable-header-box table, .ui-datatable-scrollable-footer-box table, .ui-datatable-scrollable-body table {
    table-layout: auto;
}

到 Showcase
产生(删除了我以前的图像，因为声誉不够高，超过 2 个):

Showcase with edited css

Answer 1

I want the columns of my table to adjust its width to the biggest element.

PrimeFaces DataTable 默认样式使用 table-layout: fixed; .所以 如果只有 , 替换您的 tableStyle内容为 table-layout: auto;使用 w3schools.com 中所述的自动表格布局算法:

The column width is set by the widest unbreakable content in the cells

从你写的所有东西(包括评论)到现在，我假设你想要一个 可垂直和水平滚动 的数据表自动调整其列的大小 到它的内容。

我声称这是不可能的 使用 PrimeFaces DataTable 的内置功能，因为正如您已经注意到的，如果您使 DataTable 可滚动，则呈现的输出会有所不同，因为页眉、正文和页脚有不同的表(以使页眉和页脚具有粘性)。

I don't get it why its not working.

使用自动表格布局算法计算的列大小 table-layout: auto;所有三个表都会有所不同(除了它们偶然具有相同的最广泛的牢不可破的内容，例如 ShowCase 中的页眉和页脚)。如果表变得更宽，则大小的差异会变得相对(因为额外的空间平均分配给列)，所以看起来一切都可以，因为 Kukeltje commented .但是如果你缩小表格的宽度，差异就会变得明显。

             |  broadest content   | stretched by 1000
--------------------------------------------------------
             | column 1 | column 2 | column 1 | column 2
--------------------------------------------------------
header table | 2        | 3        | 502      | 503
body table   | 4        | 6        | 504      | 506
footer table | 2        | 3        | 502      | 503

您可能已经注意到，渲染的正文表还包含标题内容，但已隐藏。所以假设标题内容比正文内容更广泛，至少对于标题和正文表来说一切都会好起来的。

                   |  broadest content
========================================
                   | column 1 | column 2
========================================
header table       | 5        | 7
----------------------------------------
hidden header part | 5        | 7
body part          | 4        | 6
________________________________________
body table         | 5        | 7
----------------------------------------
footer table       | 2        | 3

最简单的解决方法 是禁用可滚动性并启用分页。有了这个，您可以或多或少地控制 DataTable 的高度(带有 rows 属性)，同时保留剩余的要求。

From my point of view the paginator looks like it is just replacing the vertical scrolling.

或多或少(因此是最简单的解决方法)。最重要的是只呈现一个表格，因此页眉、正文和页脚内容用于计算列宽:

            |  broadest content
---------------------------------
            | column 1 | column 2
---------------------------------
header part | 2        | 3
body part   | 4        | 6
footer part | 2        | 3
_________________________________
full table  | 4        | 6

How does that aid my horizontal problem?

与 table-layout: auto;您可以在分页器视口(viewport)中开箱即用地进行水平滚动。

另一种方法是禁用可滚动性并使用 ScrollPanel 包装 DataTable。这有一些缺点，因为标题也是可滚动的，并且您必须处理调整大小的问题，所以我不推荐它。

最佳解决方案将是自定义的渲染器(如果启用了可滚动性，请注意渲染的正文表中隐藏的标题内容，反之亦然)和/或为您的 DataTable 自定义 JS/CSS，但这超出了您的问题范围。

最简单的解决方案将不坚持根据表格内容自动调整列大小，并按原样采用具有滚动功能的 DataTable。