如何让Angular Material可展开表格实现响应式布局

1. 修改响应式指令，排除展开列 #

原响应式指令会遍历所有表头单元格生成移动端标签，但可展开表格的「展开按钮列」不需要显示标签，所以要在指令中过滤掉这个列：

打开mat-table-responsive.directive.ts，调整表头单元格的获取逻辑：

ngAfterViewInit() {
  // 过滤掉展开列的表头单元格
  const headerCells = Array.from(this.tableElement.querySelectorAll('mat-header-cell'))
    .filter(cell => !cell.classList.contains('mat-column-expand'));
  
  const headers = headerCells.map(cell => cell.textContent?.trim() || '');
  const dataCells = Array.from(this.tableElement.querySelectorAll('mat-row .mat-cell'));

  dataCells.forEach((cell, index) => {
    const headerIndex = index % headers.length;
    // 跳过展开列的单元格（假设展开列为第一列）
    if (headerIndex === 0) return;
    cell.setAttribute('data-label', headers[headerIndex]);
  });
}

2. 调整CSS样式，移除空白行 #

修改mat-table-responsive.directive.scss，只对非展开列的单元格应用移动端标签样式：

@media (max-width: 600px) {
  .mat-header-row {
    display: none;
  }

  .mat-row {
    flex-direction: column;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.12);
  }

  // 仅为非展开列的单元格生成标签
  .mat-cell:not(.mat-column-expand) {
    display: flex;
    align-items: center;
    padding: 8px 0;
    width: 100%;
    box-sizing: border-box;
  }

  .mat-cell:not(.mat-column-expand)::before {
    content: attr(data-label);
    font-weight: 500;
    width: 35%;
    margin-right: 16px;
    text-align: right;
  }

  // 隐藏移动端的展开列表头
  .mat-header-cell.mat-column-expand {
    display: none;
  }
}

3. 适配展开面板的响应式 #

在组件的CSS文件（比如table-basic-example.css）中，确保展开面板的内容占满宽度：

.example-element-detail {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: #f5f5f5;
}

原示例工作原理说明 #

原响应式方案的核心逻辑是：

• 遍历表头单元格，提取每列的名称
• 给每个数据单元格添加data-label属性，值为对应列的表头名称
• 在移动端（小于600px）通过CSS伪元素显示data-label的内容，模拟列名，同时将表格行改为垂直布局，实现卡片式响应效果

你的问题出在展开列没有对应的有效表头文本，导致生成了空白的标签行，通过过滤展开列即可解决。

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