如何阻止数据表中出现滚动条？

Question

我正在使用 primefaces 开发一个网络应用程序。我正在使用数据表，每次将鼠标移到表中时，底部都会出现一个滚动条，偶尔会出现在右侧。我不想要或不需要这个滚动条。

<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：确保您的内容始终位于给定视图内。否则太大的内容就会被截掉。

Answer 2

在 Angular 中为我工作的纯 CSS 解决方案

 ::ng-deep {
.p-datatable-wrapper::-webkit-scrollbar {
    scrollbar-width: none; /* Hides the scrollbar */
  }
}