Question

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

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

以下是我对dataTable的设置，它嵌套在p：scollPanel：

中

<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

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

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

从您编写（包括评论）到目前为止，我假设您需要垂直和水平滚动 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 （具有行属性）的高度，同时保留剩余的要求。

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 。这有一些缺点，标题也是可滚动的，并且调整大小有问题，所以我不推荐它。

最佳解决方案将是一个自定义渲染器（如果启用了可滚动性并扩展了副verca，请注意渲染的主体表中的隐藏标题内容）和/或为您的 DataTable定制的JS / CSS ，但这超出了你的问题范围。

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

Answer 2

我有相同的问题标题和表格内容宽度不同，我在css下创建并像我的魅力一样工作，不必删除任何像过滤器或滚动条

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

将列的宽度调整为p：dataTable中的内容

2 个答案: