Angular移动端固定表头双向滚动表格实现（仅用Sass）

首先看你遇到的问题：表头无法跟随横向滚动、列宽度被压缩，核心原因是你把tbody设置成了display: block，破坏了表格原生的列对齐机制，同时没有给表头和表格整体设置统一的滚动上下文。下面是纯CSS的解决方案，完全符合你的要求（不用JS实现横向滚动、表头固定、适配移动端屏幕）：

第一步：调整HTML结构（添加滚动容器） #

给表格套一个外层容器，用来承载滚动逻辑：

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <td *ngFor="let header of objectKeys(tableContents[0])">{{header}}</td>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let content of tableContents">
        <td *ngFor="let key of objectKeys(content)">{{content[key]}}</td>
      </tr>
    </tbody>
  </table>
</div>

第二步：修改Sass代码（核心修复） #

// 滚动容器：适配移动端屏幕高度，处理双向滚动
.table-container {
  max-height: calc(100vh - 80px); // 根据页面布局调整上下边距，适配移动端全屏
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}

.table {
  border-collapse: collapse;
  width: 100%; // 让表格占满容器宽度
  table-layout: auto; // 自动根据内容调整列宽，也可改用fixed固定列宽

  thead {
    tr {
      position: sticky;
      top: 0; // 表头固定在容器顶部
      z-index: 1; // 确保表头在内容上方不被遮挡
    }

    td {
      padding: 4px;
      background-color: $filter-background;
      color: $white;
      border: 2px solid $input-border2;
      white-space: nowrap; // 防止表头文字换行导致高度变化
    }
  }

  tbody {
    tr:nth-child(odd) {
      background-color: $input-background;
    }

    tr, td {
      border: 2px solid $input-border2;
      padding: 2px;
      white-space: nowrap; // 可选：防止单元格内容换行，保持列宽一致
    }
  }
}

关键修复点说明 #

• 滚动容器：用外层div承担滚动逻辑，避免直接修改表格的display属性，这样表头和tbody的列会自动保持对齐。
• 表头固定：通过position: sticky实现表头固定，这是纯CSS方案，不需要JS，移动端现代浏览器兼容性良好。
• 列宽对齐：去掉了原来tbody的display: block和固定width，保持表格原生的table布局，确保表头和内容列宽度完全匹配。
• 横向滚动：容器的overflow-x: auto会在表格内容超出容器宽度时自动显示横向滚动条，表头会跟随滚动，完全不用JS干预。

额外优化建议 #

确保你的objectKeys管道返回的键顺序在每个tableContents对象中是一致的，这样表头和内容的列才能一一对应。如果有需要，可以给*ngFor加上trackBy优化性能：

<td *ngFor="let header of objectKeys(tableContents[0]); trackBy: trackByKey">{{header}}</td>

然后在组件类中添加：

trackByKey(index: number, key: string) {
  return key;
}

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