我有一个表格，里面有一些用于移动网站的东西（好吧，假设它是一个移动网站 - 它实际上是一个使用 webcomponents 的 Genero 应用程序，但那些只是 HTML5）。每行显示当天活动的摘要。
Date Deposits Purchases Balances
02/16/16 5.00 5.00 0.00
02/15/16 0.00 15.00 0.00
02/14/16 20.00 5.00 15.00
等等。
在每一行旁边，我想使用摘要/详细信息标签来显示所有交易的逐项列表。
Item Trans Type Charge Deposit
Apple Charge 0.75 0.00
Payment Deposit 0.00 5.00
Banana Charge 4.25 0.00
管他呢。我想要的是在每个日期之前使用这些标签：
<details>
<summary>
(summary table row content)
</summary>
(detail table)
</details>
这个想法是在每行的开头创建一个显示细节的显示三角形。
我已经尝试将“摘要”标签的内容设为空白，这样它就会绘制显示三角形并使表格的每一行成为 HTML 中的自己的表格，但这会在线条上方绘制显示三角形。
现在我正在尝试使用带有 class="width-x-pct" 的内联块 div 标签来完成它，并且让它们对齐是不可能的，尤其是在多个移动设备上查看时。如果我把它放在 iPhone 6 上，那么它在 Galaxy S5 上看起来是错误的。
任何建议都会很棒。
我有一个带有 Angular Material 8 的 Angular 8 项目，它无法通过同一组件中的按钮切换 sidenav。javascript控制台说
无法读取未定义的属性“切换”
但是 sidenav 在模板中有引用变量。
我已经确保按钮在模板中，这样我就不必担心事件发射器或其他技巧。这应该很简单。
HTML
<mat-toolbar color="primary">
<button mat-icon-button (click)="sidenav.toggle()" *ngIf="(isHandset$ | async)"><mat-icon>menu</mat-icon></button>
<span>This Be Me App, Matey</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #sidenav class="sidenav" fixedInViewport="true" *ngIf="isAuthenticated()"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) ? 'false' : 'true'">
<mat-toolbar><mat-icon (click)="sidenav.toggle()" *ngIf="(isHandset$ | async)">arrow_back</mat-icon> Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item [routerLink]="['/home']" routerLinkActive="active">Home</a>
<a mat-list-item (click)="logout()">Logout</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content class="content">
<!-- Add Content Here --> …