Как выровнять несколько описаний в мат-панели

Question

Я пытаюсь, чтобы описания выглядели более выровненными на моей циновке. Если одно поле длиннее другого, оно сдвигает все вправо. Как сделать так, чтобы описания оставались выровненными друг с другом?

<mat-accordion>
  <mat-expansion-panel [expanded]="allExpandState">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Account #: {{accountNumber}}
      </mat-panel-title>
      <mat-panel-description>
        {{type}}
      </mat-panel-description>
      <mat-panel-description>
        {{date}}
      </mat-panel-description>
      <mat-panel-description>
        {{value}}
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  <!-- ... -->
</mat-accordion>

Как это выглядит сейчас:

Answer 1

Вы можете создать только одно описание mat-panel и создать таблицу внутри для выравнивания ваших значений.

<mat-accordion>
  <mat-expansion-panel [expanded]="allExpandState">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Account #: {{accountNumber}}
      </mat-panel-title>
      <mat-panel-description>
        <table>
          <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
        </table>
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  <!-- ... -->
</mat-accordion>