Angular 13实现表格行Hover时超出原表格宽度的问题解决

我在Angular 13项目中尝试实现表格行Hover时，行宽度占满整个父组件（移除表格左右内边距）的效果，但目前只能让Hover背景局限在表格原有宽度内。试过将display改为contents、自定义Hover指令、调整边距与内边距都未达到预期，现在考虑替换表格组件或使用ag-grid。

现有HTML代码 #

<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>

现有CSS代码 #

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;
  }
}

解决方案：利用伪元素突破表格宽度限制 #

表格的原生布局特性会限制行的宽度范围，无法直接让Hover背景超出表格。可以通过给Hover行添加伪元素，脱离表格布局实现占满父组件的效果：

1. 修改行Hover样式 #

.clickable_table_row {
  position: relative; /* 为伪元素提供定位基准 */
  cursor: pointer;
}

.clickable_table_row:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* 占满视口宽度，可根据父容器调整 */
  height: 100%;
  background-color: var(--med-admin-hover);
  z-index: -1; /* 将伪元素置于行内容下方 */
}

2. 适配父容器内边距（如果父容器有左右内边距） #

假设父容器.task_group_block/.task_group_block_pagination有padding: 0 20px，调整伪元素参数抵消内边距：

.task_group_block, .task_group_block_pagination {
  position: relative;
  padding: 0 20px;
}

.clickable_table_row:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px; /* 抵消父容器左边距 */
  right: -20px; /* 抵消父容器右边距 */
  height: 100%;
  background-color: var(--med-admin-hover);
  z-index: -1;
}

3. 注意事项 #

• 确保表格position不为static（现有代码中已设置position: relative，符合要求）
• 若表格存在横向滚动，需将伪元素宽度改为滚动容器的宽度
• 无需修改行的display属性，保持默认table-row即可

如果上述方法仍无法满足需求，可考虑用div模拟表格布局，或直接使用ag-grid等组件，这类组件自带更灵活的行样式配置能力。

内容的提问来源于stack exchange，提问作者Yeva