我试图使表的行在悬停时比实际表中的行更宽，这是我到目前为止的代码，我需要与第一张图片上的结果相同，在第二张图片上，我有当前的结果，您可以看到悬停删除了表的左右部分的填充，以便该行占据整个组件。
我正在研究Angular 13。

<div [ngClass]="!sharedEnum.paginationGroupIds.includes(taskGroupId) ? 'task_group_block' : 'task_group_block_pagination'">
    <table>
      <thead>
      <tr>
        <th *ngFor="let header of currentTableHeaders">{{headerTitles[header]}}</th>
      </tr>
      </thead>
      <tbody>
      <tr [ngClass]="currentTableHeaders.includes('taskResultType') ? 'clickable_table_row' : ''"
          *ngFor="let item of tableData | paginate: { itemsPerPage: _itemsPerPage, currentPage: page }"
          (click)="industrialService.openTaskInsights(item)">
        <td *ngFor="let header of currentTableHeaders">
          <ng-container [ngSwitch]="header">
            <ng-container *ngSwitchCase="'taskResultType'">
              <div class="task_group_types" style="white-space: nowrap" [ngClass]="'task_type_' + item?.taskResultTypeId">
                {{item[header]}}
              </div>
            </ng-container>
            <ng-container *ngSwitchCase="'title'">
              <div style="min-width: 350px">
                {{item[header]}}
              </div>
            </ng-container>
            <ng-container *ngSwitchCase="'authority'">
              <div style="min-width: 350px">
                {{item[header]}}
              </div>
            </ng-container>
            <ng-container *ngSwitchCase="'taskStatus'">
              <div class="task_group_types" style="white-space: nowrap" [ngClass]="'task_status_' + item?.taskStatusId">
                <img *ngIf="!item[header]; else statusType" src="assets/images/ui-kit-icons/icons/iconPlainLine.svg">
                <ng-template #statusType>{{item[header]}}</ng-template>
              </div>
            </ng-container>
            <ng-container *ngSwitchDefault>
              <div [innerHTML]="item[header]"></div>
            </ng-container>
          </ng-container>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

table {
  cursor: default;
  position: relative;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 400;

  th {
    min-width: 120px;
    white-space: nowrap;
    background-color: var(--med-admin-white);
    top: 0;
    position: sticky;
    padding: 13px 10px 13px 10px;
    color: var(--med-admin-grey);
  }

  td {
    white-space: break-spaces;
    width: max-content;
    min-width: 120px;
    padding: 10px 10px 15px;
  }

  td {
    border-top: 0.5px solid var(--med-admin-light-grey);
    border-right: 1px solid var(--med-admin-light-grey);
    border-bottom: 0.5px solid var(--med-admin-light-grey);
  }

  th {
    border-top: 1px solid var(--med-admin-light-grey);
    border-right: 1px solid var(--med-admin-light-grey);
    border-bottom: 1px solid var(--med-admin-light-grey);
  }

  th:first-of-type, td:first-of-type {
    padding-left: 0;
  }

  td:last-of-type, th:last-of-type {
    border-right: none;
  }

  .clickable_table_row:hover {
    background-color: var(--med-admin-hover);
    cursor: pointer;
  }
}```

I am have tried to changes display: table-row to contents and work with it, but no result. Also tried to add separate directive displaying on hover, no result. Also tried to work with paddings and margins,but still didn't work. I am considering to change <table> and work with directive. Also considering using ag-grid if nothing else will work.