html - 表格宽度 100% 超过父 mat-nav-list
问题描述
我有以下代码在 a 中呈现表格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% 时,它会像这样占据整个屏幕:
如何限制宽度以匹配父元素?
解决方案
如果要编辑 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>
推荐阅读
- sugarcrm - 使用 SugarCRM 9.0 API 过滤电子邮件地址
- substrate - 有没有办法调整基板中的块间隔?
- android - Xamarin - 无法通过 Android(和 iOS)访问本地 api
- angular - Angular http get response in observable 在单元测试中不是类型转换
- android - GItlab CI :- 如何使用 Gitlab-CI 在 Android 中创建多个 apk(如开发、登台和生产)?
- python-3.x - Python 脚本返回无
- perl - 使用 Mojo::UserAgent 进行正则表达式匹配的解码结果
- windows - 为多个文件夹中的所有文件添加前缀
- json - Logstash:创建新文件并从 ruby 中的 json 获取动态键值
- typescript - 如何在打字稿的接口/类型中将枚举值类型转换为数组?