Как сделать всю строку таблицы данных кнопкой углового материала

Question

Как сделать целую строку таблицы данных и кнопку материала?

Здесь вы видите кнопку в отдельной ячейке таблицы данных материала.Но я хочу, чтобы, если вы наведите курсор на всю строку , она присвоит строке стиль mat-button.

Должен ли я просто использовать css для достижения этой цели с помощью :hover?И могу ли я как-то обмануть это и использовать тот же стиль, который использует angular-материал?

Answer 1

Как насчет использования кнопок в каждом тд и сопоставления цветов для других ячеек?

релевантно 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); }

рабочий стекблиц