Аккордеон в дизайне материалов в таблице html

Question

Стол был построен с использованием тега html. Он имеет кнопку в колонке «Подробности», по щелчку которой детали продукта должны отображаться как аккордеон. Пожалуйста, помогите достичь этого, используя конструкцию материалов.

Это структура таблицы 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> 

Minimal репро: https://plnkr.co/edit/2061oMJopjBQW85T9JKL?p=preview