PrimeFaces 中可调整大小列的自动换行答案

【问题标题】：Word wrap with resizable columns in PrimeFacesPrimeFaces 中可调整大小列的自动换行
【发布时间】：2015-05-05 00:13:52
【问题描述】：

我正在使用 PrimeFaces 数据表。我需要将列标题自动换行并调整大小。这是我的问题：

当我做styleClass="wrap" resizableColumns="true"时，只能调整大小正在工作。
当我执行styleClass="wrap" resizableColumns="false" 时，只有自动换行起作用。

我的代码是：

<p:dataTable id="transitCycleHighLevelDataTable" var="record"
    value="#{transitCycleMB.highLevel}" rowKey="#{record.group}"
    paginator="true" paginatorPosition="bottom" rows="10"
    styleClass="wrap" resizableColumns="true" scrollable="true"
    scrollWidth="100%" scrollHeight="250"
    rowsPerPageTemplate="10,20,50"
    paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {RowsPerPageDropdown} {NextPageLink} {LastPageLink} {Exporters}"
    currentPageReportTemplate="(Displaying {startRecord} - {endRecord} of {totalRecords}, Page: {currentPage}/{totalPages})">

【问题讨论】：

标签： jsf-2 primefaces datatable

【解决方案1】：

将此样式添加到您的dataTable 将允许列标题换行并且列保持可调整大小：

.ui-datatable thead th {
   white-space: normal !important;
}

注意：这是在 PrimeFaces 6.2 上测试并运行的。

【讨论】：

嗨，请宣传至少可以使用的 PF 版本！干杯谢谢你的回答
好主意。完成。
.wrap.ui-datatable thead th 的选择器不使用!important 是否也可以工作？总是更好地使用更具体的选择器而不是 !important（如果它没有）
我认为您的选择器可以在这里工作，但我会按原样保留我的答案，因为它不需要 dataTable 具有 wrap 类。这使其对未来的访问者更加通用。当然，欢迎您添加另一个答案 =)
我理解但完全不同意 ;-)。这意味着它会自动应用于所有数据表，并且如果在模板中的通用 css 中完成，当它不需要时，它会更难覆盖。如果你想在任何地方都这样做，你可以有一个带有.wrap 的选择器，但是例如在模板的主体上添加包装类。它仍然适用于任何地方，但更容易覆盖。另见stackoverflow.com/questions/5701149/… 和stackoverflow.com/questions/8768317/…