Ant Design NZ-Table 添加水平滚动条并自定义滚动条样式

当页面中的表格过大时，如果在页面的最下面增加横向滚动条，并且可以修改滚动条的样式内容：您可以使用'nzScroll'属性来添加水平滚动条，并使用自定义样式来修改滚动条的样式。以下是一个示例：

在您的组件样式文件中添加以下样式：

::ng-deep .ant-table-body {
  overflow-x: auto;
}

::ng-deep .ant-table-body::-webkit-scrollbar {
  height: 8px;
}

::ng-deep .ant-table-body::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::ng-deep .ant-table-body::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

::ng-deep .ant-table-body::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

在您的组件模板中使用'nzScroll'属性来添加水平滚动条：

<nz-table #groupingTable [nzData]="listOfData" [nzWidthConfig]="tablewidth" nzBordered nzSize="middle"
  [nzScroll]="{ x: '100%' }" nzShowSizeChanger [nzTotal]="totalcount" nzFrontPagination="false"
  [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="pageIndexChange($event)"
  (nzPageSizeChange)="pageSizeChange($event)" [nzShowTotal]="totalTemplate" style='white-space: nowrap'>
  <!-- 表格列定义 -->
</nz-table>

这将在表格容器中添加水平滚动条，并使用自定义的样式来修改滚动条的外观。