Проблема выравнивания с панелью расширения Angular Material с mat-nav-list

Я пытался воспроизвести ошибку:

Проблема возникла по следующим причинам:

1. Элемент mat-expansion-panel-header установил padding: 0 24px; по умолчанию, тогда как элемент mat-list-item установил padding: 0 16px; по умолчанию.
2. Вы не добавили CSS border-collapse: collapse; в table.

Также замените <table border = "1" width = "200px"> на <table border = "0" width = "200px">.

список-обзор-example.ts

import { Component } from '@angular/core';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { MatExpansionModule } from '@angular/material/expansion';

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
  standalone: true,
  imports: [MatListModule, MatIconModule, MatExpansionModule],
})
export class ListOverviewExample {}

список-обзор-example.html

<mat-list role = "list">
  <a mat-list-item role = "listitem">
    <mat-icon>accessibility</mat-icon>
    <span>User 1</span>
  </a>
  <a mat-list-item role = "listitem">
    <mat-icon>accessibility</mat-icon>
    <span>User 2</span>
  </a>
  <a mat-list-item role = "listitem">
    <mat-icon>accessibility</mat-icon>
    <span>User 3</span>
  </a>
  <a>
    <mat-accordion class = "mat-accordion-setting">
      <mat-expansion-panel hideToggle>
        <mat-expansion-panel-header>
          <mat-panel-title matTooltip = "User 4 Title" style = "text-align: left">
            <table border = "0" width = "200px">
              <tr>
                <td style = "padding-left: 0px; padding-right: 0px">
                  <mat-icon class = "mat-accordion-setting"
                    >accessibility</mat-icon
                  >
                </td>
                <td class = "mat-panel-title-setting">User 4 Title</td>
              </tr>
            </table>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div>
          <mat-panel-description
            id = "submenu1"
            class = "mat-panel-description-setting"
            ><a>Submenu 1</a></mat-panel-description
          >
          <mat-panel-description
            id = "submenu2"
            class = "mat-panel-description-setting"
            ><a>Submenu 2</a></mat-panel-description
          >
          <mat-panel-description
            id = "submenu3"
            class = "mat-panel-description-setting"
            ><a>Submenu 3 </a></mat-panel-description
          >
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </a>
</mat-list>

стили.scss

.mat-expansion-panel-header {
  padding: 0 16px !important;
}

table {
  border-collapse: collapse;
}

Выход:

Посмотрите живую демонстрацию.