Angular mat-table colspan异常：列未跳过导致表格出现多余列

问题原因 #

Mat-Table会严格按照columnsToDisplay中的每一列渲染对应的<td>元素，当某个单元格设置colspan=N后，后续的N-1列仍然会被渲染空单元格，导致该行总列数 = 原始列数 + (N-1)，最终出现列偏移和末尾多余列。

解决方案：重构数据结构，按时间段而非单月定义数据 #

将原有的按月份拆分的数据源，改为按时间段定义，每个时间段包含跨列数、显示内容和覆盖的月份，直接控制渲染的单元格数量，从根源避免多余列生成。

1. 修改TypeScript代码 #

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-fertilization',
  templateUrl: './fertilization.component.html',
  styleUrl: './fertilization.component.scss',
  animations: [
    trigger('detailExpand', [
      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition(
        'expanded <=> collapsed',
        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
      ),
    ]),
  ],
})
export class FertilizationComponent {
  public dataSource: any = new MatTableDataSource();
  public fertilizationSchedule: YearElement[] = [];
  // 保留完整月份列表用于表头展示
  allMonths = [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'June',
    'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'
  ];
  columnsToDisplayWithExpand = ['periods', 'expand'];
  expandedElement: YearElement | undefined;

  constructor() {
    this.fertilizationSchedule = [
      { 
        periods: [
          { name: '', colspan: 1, color: '', months: ['Jan'] },
          { name: '', colspan: 1, color: '', months: ['Feb'] },
          { name: "Step 1 - Early Spring", colspan: 2, color: "#ffff91", months: ['Mar', 'Apr'] },
          { name: '', colspan: 1, color: '', months: ['May'] },
          { name: '', colspan: 1, color: '', months: ['June'] },
          { name: '', colspan: 1, color: '', months: ['July'] },
          { name: '', colspan: 1, color: '', months: ['Aug'] },
          { name: '', colspan: 1, color: '', months: ['Sept'] },
          { name: '', colspan: 1, color: '', months: ['Oct'] },
          { name: '', colspan: 1, color: '', months: ['Nov'] },
          { name: '', colspan: 1, color: '', months: ['Dec'] },
        ],
        description: "Fertilizer for lawn + pre-emergent weed control" 
      }
    ];

    this.dataSource = this.fertilizationSchedule;
  }
}

interface YearElement {
  periods: Period[];
  description: string;
}

interface Period {
  name: string;
  colspan: number;
  color?: string;
  months: string[];
}

2. 修改HTML模板 #

将原循环月份列的逻辑改为循环每行的periods数组，表头通过跨列单元格+网格布局展示完整月份：

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
  <!-- 时间段列：包含表头和数据单元格 -->
  <ng-container matColumnDef="periods">
    <th mat-header-cell *matHeaderCellDef [attr.colspan]="allMonths.length">
      <div class="month-header">
        <span *ngFor="let month of allMonths">{{ month }}</span>
      </div>
    </th>
    <td mat-cell *matCellDef="let element">
      <div class="period-container">
        <span 
          *ngFor="let period of element.periods"
          [attr.colspan]="period.colspan"
          [style.background-color]="period.color"
        >
          {{ period.name }}
        </span>
      </div>
    </td>
  </ng-container>

  <!-- 展开按钮列 -->
  <ng-container matColumnDef="expand">
    <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
        @if (expandedElement === element) {
          <mat-icon>keyboard_arrow_up</mat-icon>
        } @else {
          <mat-icon>keyboard_arrow_down</mat-icon>
        }
      </button>
    </td>
  </ng-container>

  <!-- 展开详情列 -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <div class="example-element-description">
          {{element.description}}
          <span class="example-element-description-attribution"></span>
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

3. 添加CSS样式适配布局 #

table {
  width: 100%;
  border-collapse: collapse;
}

/* 月份表头网格布局 */
.month-header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
}

.month-header span {
  text-align: center;
  padding: 8px;
  border-right: 1px solid rgba(0,0,0,0.12);
}

/* 时间段单元格容器 */
.period-container {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.period-container span {
  display: table-cell;
  text-align: center;
  padding: 8px;
  border-right: 1px solid rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

tr.example-detail-row {
  height: 0;
}

tr.example-element-row:not(.example-expanded-row):hover {
  background: whitesmoke;
}

tr.example-element-row:not(.example-expanded-row):active {
  background: #efefef;
}

.example-element-row td {
  border-bottom-width: 0;
}

.example-element-detail {
  overflow: hidden;
  display: flex;
}

.example-element-description {
  padding: 16px;
}

.example-element-description-attribution {
  opacity: 0.5;
}

关键说明 #

• 重构后的periods数组直接控制每个跨列单元格的覆盖范围，避免了原结构中强制渲染单月单元格的问题
• 表头通过网格布局保证完整月份展示，与下方跨列单元格一一对应
• 支持任意跨列组合（如跨3列、多段跨列），扩展性更强

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