Angular Material表格无法调整尺寸且保持对齐问题求助

你当前的问题源于样式冲突和错误的样式应用，导致表格对齐错乱，以下是具体修正方案：

问题分析 #

1. 同时使用margin:auto和float:right会触发样式冲突，两者无法同时生效
2. 给<th>添加skills类会继承表格的浮动属性，直接打乱列的布局顺序
3. ID和Class重复定义样式（#skills和.skills都设置了float:right与display:table），造成冗余和布局混乱

修正后的代码 #

HTML部分 #

用外层容器包裹表格，便于统一控制位置：

<div class="table-container">
  <table mat-table [dataSource]="dataSource" class="skills">
    <ng-container matColumnDef="Skill">
      <th mat-header-cell *matHeaderCellDef class="name">
        <strong>Skill</strong>
      </th>
      <td mat-cell *matCellDef="let element" class="name">
        {{element.name}}
      </td>
    </ng-container>
    <ng-container matColumnDef="Years of Experience">
      <th mat-header-cell *matHeaderCellDef class="rank">
        <strong>Years</strong>
      </th>
      <td mat-cell *matCellDef="let element" class="rank">
        {{element.exp}}
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

CSS部分 #

清理冗余样式，通过容器控制位置，表格内部仅处理自身布局：

/* 容器负责表格的右侧定位和整体宽度 */
.table-container {
  float: right;
  width: 20vw;
  margin-right: 20px; /* 可选：与屏幕右侧保留间距 */
}

.skills {
  border: 1px solid black;
  width: 100%; /* 表格占满容器宽度 */
  border-collapse: collapse; /* 合并边框，避免重复线条 */
}

/* 统一表头和单元格的对齐与边框样式 */
.skills .name,
.skills .rank {
  text-align: center;
  border: 1px solid black;
}

/* 可选：固定列宽比例，避免内容拉伸表格 */
.skills .name {
  width: 70%;
}

.skills .rank {
  width: 30%;
}

关键调整点 #

• 将浮动和宽度属性转移到外层容器，避免直接修改表格布局属性破坏Angular Material的默认结构
• 移除#skills的重复样式，保持样式定义单一
• 使用border-collapse: collapse合并边框，解决边框重复显示的问题
• 通过列宽比例控制表格内部布局，确保表头与单元格对齐一致

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