如何停止滚动条出现在dataTable中？

Question

我正在使用primefaces的web应用程序。我使用的是数据表，每次将鼠标移动到表格中，滚动条会出现在底部，偶尔会出现在右侧。我不想或不需要这个滚动条。

<p:dataTable var="o" id="territoryTable" widgetVar="territoryDataTable" value="#{searchTerritory.lazyModel}" lazy="true" dynamic="true" paginator="true" paginatorPosition="bottom" rows="#{configParams['dataTable.row.default']}" styleClass="dataTableMargin" 
 
    rowKey="#{o.id}" selectionMode="single" rowsPerPageTemplate="#{configParams['dataTable.row.values']}"> 
 

 
    <p:ajax event="rowSelect" listener="#{searchTerritory.onRowSelect}" /> 
 
    <p:ajax event="filter" ignoreAutoUpdate="true" /> 
 

 
    <p:column headerText="#{messages['territory.id']}"> 
 
    <h:outputText value="#{o.custom_id}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['territory.name']}"> 
 
    <h:outputText value="#{o.name}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['territory.description']}"> 
 
    <h:outputText value="#{o.description}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['status.active']}"> 
 
    <p:selectBooleanCheckbox disabled="true" value="#{o.activeFlag}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['territory.coordinator.TerritoryManager']}"> 
 
    <h:outputText value="#{o.territoryManager.name}" /> 
 
    </p:column> 
 

 
    <p:column headerText="#{messages['territory.coordinator.status']}"> 
 
    <h:outputText value="#{o.territoryManager.activeFlag eq true ? 'Active' : 'Inactive'}" /> 
 
    </p:column> 
 
</p:dataTable>

任何人有关于如何去除它的想法？

Answer 1

我会建议一个纯粹的CSS解决方案，你只需隐藏滚动条。溢出的内容将被隐藏。

你需要在你的CSS插入下面的：

.dataTableMargin .ui-datatable-tablewrapper { 
    overflow: hidden; 
} 

其中dataTableMargin是你给出的styleClass和ui-datatable-tablewrapper是围绕着数据表内容的包装。 PS：确保您的内容始终位于给定的视图内。否则太大的内容将被截断。