根据p:dataTable中的内容调整列的宽度

我想让我的表的列调整其宽度，以最大的元素。比如双击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

更新:

我不知道为什么，但似乎表布局:auto不使用和两个div生成。一个用于表的Header，另一个用于表的body。这就是为什么我发布的第一个布局显示，标题和正文很好地适合自己，但标题不适合正文。

生成的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解决这个问题吗?

UPDATE from comment

应用

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

显示生成(删除了我以前的图片，因为声誉不够高，不能超过2):

展示编辑后的css

我想让我的表的列调整其宽度为最大的元素。

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

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

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

我声称这是不可能的与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属性)，同时保留剩余的需求。

从我的角度来看，分页器看起来只是取代了垂直滚动。

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

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

最佳解决方案将是一个自定义的渲染器(注意隐藏的标题内容在渲染体表，如果可滚动性是启用和扩展反之)和/或自定义的JS/CSS为您的数据表，但这超出了你的问题范围。

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

我也有同样的问题，标题和表格内容宽度不同，我在下面创建了CSS，对我来说很有魅力，不需要删除过滤器或滚动条等任何东西

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

相关内容

最新更新

热门标签：