如何在Angular中实现最后一列跨行居中的表格设计？

你可以利用HTML表格的rowspan属性实现需求，让最后一列的单个单元格跨越多行，同时设置文本居中样式。具体实现如下：

1. 组件类示例数据 #

假设你的组件中有如下对象数组和最后一列要显示的内容：

export class AppComponent {
  // 循环渲染的数据源
  items = [
    { name: '项目1', value: '数值1' },
    { name: '项目2', value: '数值2' },
    { name: '项目3', value: '数值3' }
  ];
  // 最后一列的统一内容
  unifiedColumnContent = '这是最后一列的固定内容';
}

2. 模板代码调整 #

修改表格结构，仅在第一个循环行中渲染最后一列单元格，并通过rowspan让它跨所有数据行：

<table border="1">
  <thead>
    <tr>
      <th>名称</th>
      <th>数值</th>
      <th>固定列</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items; let index = index">
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
      <!-- 仅第一行渲染最后一列，跨行数等于数据数组长度 -->
      <td 
        *ngIf="index === 0" 
        [attr.rowspan]="items.length" 
        style="text-align: center; vertical-align: middle;"
      >
        {{ unifiedColumnContent }}
      </td>
    </tr>
  </tbody>
</table>

3. 样式优化（可选） #

如果需要更规整的样式，可在组件CSS中添加：

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
th, td {
  border: 1px solid #e0e0e0;
  padding: 0.8rem;
}
.unified-column {
  text-align: center;
  vertical-align: middle;
  background-color: #f5f5f5;
}

然后给最后一列的<td>加上class="unified-column"即可。

这种方式能让最后一列的内容在整个列中垂直居中显示，完全符合你想要的效果。

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