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>

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