将列的宽度调整为 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}">

使用：

• primefaces 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

我有相同的问题标题和表格内容宽度不同，我在 css 下创建并且对我来说就像一个魅力，不必删除过滤器或滚动条之类的任何东西

.ui-datatable-scrollable-header-box table th, .ui-datatable-scrollable-footer-box table th, .ui-datatable-scrollable-body table td{
   width: 20% !important;
}

Answer 2

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 中所述的自动表格布局算法：

列宽由单元格中最宽的牢不可破的内容设置

从您编写的所有内容（包括 cmets）到现在，我假设您想要一个 垂直和水平滚动 DataTable，它自动调整其列的大小到它的内容。

我声称这是不可能使用 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;，您可以在分页器视口中开箱即用地水平滚动。

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

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

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