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

Question

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

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

以下是我在ap: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):

展示与编辑过的CSS

Answer 1

我希望我的表格的列将其宽度调整为最大元素.

PrimeFaces DataTable默认样式使用table-layout: fixed;.因此,如果只是这样,请更换您的tableStyle内容,table-layout: auto;以使用w3schools.com上所述的自动表格布局算法:

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

从您编写(包括注释)到目前为止,我假设您需要一个垂直和水平可滚动的 DataTable,它可以自动调整列的内容.

我声称使用PrimeFaces DataTable的内置功能是不可能的,因为正如您已经指出的那样,如果您使DataTable可滚动,则渲染输出的不同之处在于标题,正文和页脚有不同的表(以生成标题和页脚粘性).

我不明白为什么它不起作用.

使用自动表格布局算法计算的列大小table-layout: auto;将因所有三个表而不同(除了它们偶然具有相同的最广泛的不可破解内容,如ShowCase中的页眉和页脚).如果表格变得更宽(因为额外的空间被平均分配给列),则大小的差异会相对激活,所以看起来像Kukeltje评论的那样可能是正常的.但是如果缩小表格的宽度,差异就会变得明显.

             |  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属性),同时保留了剩余的需求.

从我的角度来看,paginator看起来只是取代了垂直滚动.

或多或少(因此最简单的解决方法).最重要的是只渲染了一个表,因此使用页眉,正文和页脚内容来计算列宽:

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

这对我的横向问题有何帮助？

在table-layout: auto;开箱即用的情况下,您可以在分页器视口中进行水平滚动.

另一种方法是禁用可滚动性并使用ScrollPanel包装DataTable.这有一些缺点,标题也是可滚动的,并且调整大小你需要处理的问题,所以我不推荐它.

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

最简单的解决方案是不要根据表格内容坚持自动列大小调整,并采用具有滚动功能的DataTable.