Angular 4中实现表格tbody垂直滚动以集成ngx-infinite-scroll

我来帮你解决这个问题！要实现<tbody>单独滚动并结合ngx-infinite-scroll工作，得先搞定CSS布局的问题，再正确配置无限滚动指令——之前的CSS无效是因为table默认的布局规则限制了tbody的滚动行为，下面是具体的解决方案：

table默认采用table-layout: auto布局，<tbody>属于table-row-group元素，无法单独成为滚动容器。你需要调整table、thead和tbody的显示模式，让tbody变成独立的滚动块：

/* 用外层容器包裹表格，避免影响其他表格样式 */
.table-scroll-container {
  width: 100%;
}

/* 固定表格布局，避免列宽被内容撑开 */
.table-scroll-container table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* 让thead保持表格结构，固定在顶部 */
.table-scroll-container thead {
  display: table;
  width: 100%;
}

/* 将tbody设置为可滚动的块级元素 */
.table-scroll-container tbody {
  display: block;
  height: 300px; /* 自定义滚动区域高度 */
  overflow-y: auto;
  width: 100%;
}

/* 确保tbody的行和thead列宽对齐 */
.table-scroll-container tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

在调整好CSS后，直接在<tbody>上添加ngx-infinite-scroll的指令即可：

模板代码 #

<div class="table-scroll-container">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <!-- 其他表头列 -->
      </tr>
    </thead>
    <!-- 在tbody上绑定无限滚动指令 -->
    <tbody 
      infiniteScroll
      [infiniteScrollDistance]="2"
      [infiniteScrollThrottle]="500"
      (scrolled)="loadMoreData()"
    >
      <tr *ngFor="let item of dataList">
        <td>{{item.column1}}</td>
        <td>{{item.column2}}</td>
        <!-- 其他数据列 -->
      </tr>
    </tbody>
  </table>
</div>

组件逻辑代码 #

currentPage = 1;
dataList: any[] = [];

constructor(private apiService: YourApiService) {}

// 页面初始化时加载第一页数据
ngOnInit() {
  this.loadMoreData();
}

// 滚动到底部时触发的加载逻辑
loadMoreData() {
  // 调用API获取下一页数据
  this.apiService.fetchData(this.currentPage++).subscribe(newData => {
    // 合并新旧数据，触发Angular变更检测
    this.dataList = [...this.dataList, ...newData];
  });
}

• 如果出现表头和tbody列宽不对齐的情况，可以给<th>和<td>设置固定宽度（比如th, td { width: 25%; }），根据实际列数调整比例。
• infiniteScrollDistance参数控制滚动到距离底部多少比例时触发加载（比如设为2表示距离底部2倍容器高度时触发），infiniteScrollThrottle是节流时间，避免频繁触发请求。
• 确保tbody的高度是固定值（或max-height），否则overflow-y: auto不会生效。

内容的提问来源于stack exchange，提问作者Vithushan