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