Question

有角度的材料表中的页脚对齐有问题。看似莫名其妙。

从截图中可以看出，两个页脚列断然拒绝正确对齐。我目前已强制它们全部在 html 中左对齐，但如您所见，“编辑”列页脚和“mon”列页脚仍然不正常。

列定义定义为：

  displayedColumns: string[] = [
    'edit', 'delete', 'project', 'site', 'location', 
    'shift', 'workpack', 'description', 'mon', 'tue', 
    'wed', 'thu', 'fri', 'sat', 'sun', 'total'
  ];

  dataSource = this.rows;

模板：

<!---- header ----->
<div class="wrap">

  <table mat-table [dataSource]="rows" class="mat-elevation-z8">

    <ng-container matColumnDef="edit">
      <th mat-header-cell *matHeaderCellDef> Edit </th>
      <td mat-cell *matCellDef="let row"> <mat-icon>edit</mat-icon></td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="delete">
      <th mat-header-cell *matHeaderCellDef> Delete </th>
      <td mat-cell *matCellDef="let row"> <mat-icon>delete</mat-icon></td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>
  
    <ng-container matColumnDef="project">
      <th mat-header-cell *matHeaderCellDef > Project </th>
      <td mat-cell *matCellDef="let row"> {{row.project}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>
  
    <ng-container matColumnDef="site">
      <th mat-header-cell *matHeaderCellDef> Site </th>
      <td mat-cell *matCellDef="let row"> {{row.site}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="location">
      <th mat-header-cell *matHeaderCellDef> Location </th>
      <td mat-cell *matCellDef="let row"> {{row.location}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="shift">
      <th mat-header-cell *matHeaderCellDef> Shift </th>
      <td mat-cell *matCellDef="let row"> {{row.shift}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>
  
    <ng-container matColumnDef="workpack">
      <th mat-header-cell *matHeaderCellDef> Workpack </th>
      <td mat-cell *matCellDef="let row"> {{row.workpack}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef> Description </th>
      <td mat-cell *matCellDef="let row"> {{row.description}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="mon">
      <th mat-header-cell *matHeaderCellDef>Mon</th>
      <td mat-cell *matCellDef="let row" > {{row.mon}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{totals[6]}} </td>
    </ng-container>

    <ng-container matColumnDef="tue">
      <th mat-header-cell *matHeaderCellDef>Tue</th>
      <td mat-cell *matCellDef="let row"> {{row.tue}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[5] }} </td>

    </ng-container>

    <ng-container matColumnDef="wed">
      <th mat-header-cell *matHeaderCellDef>Wed</th>
      <td mat-cell *matCellDef="let row"> {{row.wed}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[4] }} </td>

    </ng-container>

    <ng-container matColumnDef="thu">
      <th mat-header-cell *matHeaderCellDef>Thu</th>
      <td mat-cell *matCellDef="let row"> {{row.thu}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[3] }} </td>

    </ng-container>

    <ng-container matColumnDef="fri">
      <th mat-header-cell *matHeaderCellDef>Frid</th>
      <td mat-cell *matCellDef="let row"> {{row.fri}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[2] }} </td>

    </ng-container>

    <ng-container matColumnDef="sat">
      <th mat-header-cell *matHeaderCellDef>Sat</th>
      <td mat-cell *matCellDef="let row"> {{row.sat}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[1] }} </td>

    </ng-container>

    <ng-container matColumnDef="sun">
      <th mat-header-cell *matHeaderCellDef>Sun</th>
      <td mat-cell *matCellDef="let row"> {{row.sun}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[0] }} </td>
    </ng-container>

    <ng-container matColumnDef="total">
      <th mat-header-cell *matHeaderCellDef>Total</th>
      <td mat-cell *matCellDef="let row"> {{row.total}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ grandTotal }} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>

  </table>

</div>

和 CSS

.wrap {
    margin: auto;
    margin-top: 30px;
    width: 90%;
}

.mat-raised-button{
  margin-right: 20px;
}

mat-form-field {
  margin-right: 12px
}

table {
  width: 100%;
}

无论我如何更改，这些列都保持未对齐状态，包括将显示的页脚列更改为纯粹的星期几和实际总数。

如果我正在为这个而烦恼，任何帮助将不胜感激！

Answer 1

看起来是这个问题：https://github.com/angular/components/issues/11232

我能够使用单个组件重现您的问题。我使用了你的模板和 CSS。这是组件定义：

import { Component, OnInit } from "@angular/core";

interface RowDef {
  edit: boolean;
  delete: boolean;
  project: string;
  site: string;
  location: string;
  shift: string;
  workpack: string;
  description: string;
  mon: number;
  tue: number;
  wed: number;
  thu: number;
  fri: number;
  sat: number;
  sun: number;
  total: number;
}

@Component({
  selector: "app-table-align",
  templateUrl: "./table-align.component.html",
  styleUrls: ["./table-align.component.css"],
})
export class TableAlignComponent implements OnInit {
  rows: RowDef[] = [
    {
      edit: true,
      delete: true,
      project: "Project",
      site: "MySite",
      location: "Bulgaria",
      shift: "first",
      workpack: "2002",
      description: "nadda",
      mon: 0,
      tue: 0,
      wed: 0,
      thu: 0,
      fri: 0,
      sat: 0,
      sun: 0,
      total: 0,
    },
  ];

  displayedColumns: string[] = [
    "edit",
    "delete",
    "project",
    "site",
    "location",
    "shift",
    "workpack",
    "description",
    "mon",
    "tue",
    "wed",
    "thu",
    "fri",
    "sat",
    "sun",
    "total",
  ];

  totals: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  grandTotal: number;

  dataSource = this.rows;

  constructor() {
    this.grandTotal = this.totals.reduce((a, b) => a + b, 0);
  }

  ngOnInit(): void {}
}

附加的 screenshot 显示 CSS 似乎应用于页眉和页脚中的不同列，从而产生您所看到的内容。

我在我的一个应用中遇到了同样的问题。我将尝试按 11232 覆盖 CSS，看看是否有帮助。

角度材料表页脚 - 对齐问题

1 个答案: