html表格中的材质设计中的手风琴

Question

使用html标签构建表格。它在Details列中有一个按钮，点击该产品的哪些细节需要显示为手风琴。请使用材料设计帮助实现。

这是html表格结构。

<table> 
     <th>ID</th> 
     <th>Title</th> 
     <tr *ngFor = "let row of indexes"> 
     <td *ngFor = "let id of row>{{id}}</td> 
     <td><button>DETAILS</button></td> 
     </tr> 
</table> 

请找到该图像

Answer 1

在结构这个答案请看：https://stackoverflow.com/a/41036475/3631348

<table> 
    <thead> 
    <!-- .. your headers --> 
    </thead> 
    <tbody> 
    <!-- wrap that template-element around your row(s) --> 
    <template ngFor let-company [ngForOf]="companies"> 
     <tr> 
      <td> 
      {{ company.company }} 
      </td> 
      <td> 
      <button type="button" class="btn btn-warning" (click)="open(company)"> 
       {{ company.showDetails ? 'hide' : 'details' }} 
      </button> 
      </td> 
     </tr> 

     <!-- .. your details will be shown under that 'data-row' .. --> 
     <tr *ngIf="company.showDetails"> <!-- any condition here to show details .. ! --> 
     <td> 
      .. details .. details .. details .. 
     </td> 
     </tr> 
    </template> 
    </tbody> 
</table> 

最小摄制：https://plnkr.co/edit/2061oMJopjBQW85T9JKL?p=preview