如何在Angular中为表格的后两列区域添加滚动条？

可以实现，核心思路是将表格拆分为固定列区域和滚动列区域，通过Flex布局让两者并排，保证行高对齐，仅对滚动列区域设置横向滚动。以下是具体实现方案：

1. 组件HTML结构 #

将表格拆分为两个独立的<table>，分别承载固定列和需要滚动的最后两列，外层用容器包裹实现并排布局：

<div class="table-wrapper">
  <!-- 固定列表格 -->
  <table class="fixed-cols">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <!-- 补充其他固定列 -->
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of tableData">
        <td>{{item.col1}}</td>
        <td>{{item.col2}}</td>
        <!-- 补充其他固定列内容 -->
      </tr>
    </tbody>
  </table>

  <!-- 滚动列容器 -->
  <div class="scroll-cols-wrapper">
    <table class="scroll-cols">
      <thead>
        <tr>
          <th>倒数第二列</th>
          <th>最后一列</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of tableData">
          <td>{{item.colLast2}}</td>
          <td>{{item.colLast1}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

2. CSS样式配置 #

保证两个表格的样式统一，同时为滚动容器设置宽度和横向滚动属性：

.table-wrapper {
  display: flex;
  border: 1px solid #e0e0e0;
}

/* 固定列与滚动列的表格基础样式统一 */
.fixed-cols, .scroll-cols {
  border-collapse: collapse;
  width: auto;
}

.fixed-cols th, .fixed-cols td,
.scroll-cols th, .scroll-cols td {
  border: 1px solid #e0e0e0;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap; /* 避免单元格内容换行 */
}

.fixed-cols th, .scroll-cols th {
  background-color: #f5f5f5;
}

/* 滚动列容器：设置宽度为表格总宽度的一半 */
.scroll-cols-wrapper {
  width: 50%;
  overflow-x: auto;
}

/* 优化滚动条样式（可选） */
.scroll-cols-wrapper::-webkit-scrollbar {
  height: 7px;
}

.scroll-cols-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

3. 组件逻辑（TypeScript） #

在组件类中定义表格数据源，确保两个表格使用同一组数据，保证行数量和顺序一致：

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-scroll-table',
  templateUrl: './custom-scroll-table.component.html',
  styleUrls: ['./custom-scroll-table.component.css']
})
export class CustomScrollTableComponent {
  // 模拟表格数据
  tableData = [
    { col1: '数据1-1', col2: '数据1-2', colLast2: '超长内容1-倒数第二列', colLast1: '超长内容1-最后一列' },
    { col1: '数据2-1', col2: '数据2-2', colLast2: '超长内容2-倒数第二列', colLast1: '超长内容2-最后一列' },
    { col1: '数据3-1', col2: '数据3-2', colLast2: '超长内容3-倒数第二列', colLast1: '超长内容3-最后一列' },
    // 更多数据...
  ];
}

关键注意事项 #

• 两个表格必须使用同一数据源循环，确保行高和行数完全匹配，避免错位
• 统一设置单元格的white-space: nowrap，防止内容换行导致行高不一致
• 滚动容器的width:50%可根据实际需求调整，匹配“占表格宽度一半”的要求

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