html - 表格宽度 100% 超出父级 mat-nav-list

Question

我有以下代码在 mat-nav-list 中呈现表格:

<mat-nav-list>
    <table>
        <tr>Node Information</tr>
        <tr>
            <td>Name</td>
            <td *ngIf="activeNode">{{activeNode.Name}}</td>
          </tr>
        <tr>
            <td>AutomationId</td>
            <td *ngIf="activeNode">{{activeNode.AutomationId}}</td>
        </tr>
        <tr>
          <td>ClassName</td>
          <td *ngIf="activeNode">{{activeNode.ClassName}}</td>
        </tr>
        <tr>
            <td>ControlType</td>
            <td *ngIf="activeNode">{{activeNode.ControlType}}</td>
        </tr>
      </table>
    <mat-accordion>
        <app-tree-display  [nodeElements]="nodeElements" (clickedNodeCallback)="clickedNode($event[0])"></app-tree-display>
    </mat-accordion>
</mat-nav-list>

看起来像这样:

我希望表格占据 mat-nav-list 宽度的 100%，但是当我将宽度设置为 100% 时，它会像这样占据整个屏幕:

如何限制宽度以匹配父元素？

Answer 1

如果你想编辑你的 mat-nav-list 的宽度，你必须在边框样式下面添加你想要的自定义宽度

    table{
    width:100%;
    }
    mat-nav-list{
    display:block;
    border:1px solid;
    /*width:600px;  this is an example*/
    }

    <mat-nav-list>
        <table>
            <tr>Node Information</tr>
            <tr>
                <td>Name</td>
                <td *ngIf="activeNode">{{activeNode.Name}}</td>
              </tr>
            <tr>
                <td>AutomationId</td>
                <td *ngIf="activeNode">{{activeNode.AutomationId}}</td>
            </tr>
            <tr>
              <td>ClassName</td>
              <td *ngIf="activeNode">{{activeNode.ClassName}}</td>
            </tr>
            <tr>
                <td>ControlType</td>
                <td *ngIf="activeNode">{{activeNode.ControlType}}</td>
            </tr>
          </table>
        <mat-accordion>
            <app-tree-display  [nodeElements]="nodeElements" (clickedNodeCallback)="clickedNode($event[0])"></app-tree-display>
        </mat-accordion>
    </mat-nav-list>

Width:auto (100%) 不在样式中指定宽度

宽度:600px