如何使整个数据表行成为角形材质按钮

Question

如何制作整个数据表行和物料按钮？

在这里，您会在材料数据表的单个单元格中看到一个按钮。但是我想要这样，以便将鼠标悬停在整个行上时，它会为行提供mat-button样式。

我是否应该使用CSS通过:hover来实现这一目标？我可以以某种方式作弊吗，并使用与角材料相同的样式吗？

Answer 1

如何在每个td中使用按钮并匹配其他单元格的颜色？

相关的 HTML ：

<table>
  <thead>
    <th>No. </th>
    <th>Name </th>
      <th>Weight </th>
        <th>symbolDate </th>
  </thead>
  <tbody>
    <tr *ngFor='let item of dataSource'>
      <td><button mat-button> {{item.position}}</button></td>
      <td><button mat-button> {{item.name}}</button></td>
      <td><button mat-button> {{item.weight}}</button></td>
      <td><button mat-button> {{item.symbolDate}}</button></td>
    </tr>
  </tbody>
</table>

相关的 CSS ：

tr td button{ width:100%;  }
tr:hover td  { background: rgba(110,110,110,1); }

working stackblitz