css - p :datatable with scroll on content

Question

我有一个包含 primefaces 的数据表:

<p:dataTable var="wapsoplandtl" id="wapsoplandtlList" widgetVar="wapsoplandtlList" value="#{exportController.wapsoplandtls}"
                 paginator="true" rows="50" scrollable="true" scrollWidth="2500px;" styleClass="borderless"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}"
                 currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}" paginatorPosition="bottom"
                 rowsPerPageTemplate="10,25,50" rowKey="#{wapsoplandtl.dtlsys}">

并产生这样的东西:

如您所见，它具有 scrollwidth 属性，但页眉滚动到最右侧。我只想滚动数据表的内容，而不是页眉和页脚(分页)。谁能帮帮我？

Answer 1

这只能通过 CSS 来完成，忘记 <p:datatable> 的可滚动属性组件，显然它总是会溢出整个表格，而不仅仅是内容。

在这种情况下，请执行以下操作:

• 删除 scrollable和 scrollWidth来自您的 <p:datatable> 的属性组件；
• 在 styleClass 中包含另一个 CSS 类(任何名称，但保留此名称以备后用，在本例中我将使用名称“overflow-content”)来自 <p:datatable> 的属性;
• 在您的页面中包含以下 CSS 规则:

-

.overflow-content .ui-datatable-tablewrapper table { 
    overflow: auto;
    width: 2500px;
}

结果会是这样的: