Javascript 有角粘桌盒阴影

所以我有一个粘性的表格，但我只需要第二列上的方框阴影，即右边的Requestor Name，我想移除我在下面的屏幕显示上放的箭头的阴影，因为第一列和第二列都是粘性的，最后一列也是粘性的，但它看起来很糟糕，那么Requestor Name列的左侧和右侧都有方框阴影.

我们该怎么做呢？谢谢.

#html代码

 <table
                          mat-table
                          [dataSource]="dataSource"
                          matMultiSort
                          (matSortChange)="requestsListTable.onSortEvent()"                        >

                        <ng-container matColumnDef="requestTitle" sticky>
                          <th mat-multi-sort-header="requestTitle" mat-header-cell *matHeaderCellDef>Request Title</th>
                          <td mat-cell *matCellDef="let element">
                            <div class="checkbox-container td-value-name">
                              <mat-checkbox [checked]="selectedWorkFlowIds.includes(element.workflowApprovalId)" [disabled]="!isAllowedBulkUpdate(element)" class="no-navigation" color="primary" (change)="onChangeSelect(element, $event, 'request')"></mat-checkbox> 
                              <div [matTooltip]="element.requestTitle" class="td-value-name">{{ element.requestTitle?.length > 45 ? element.requestTitle.slice(0,45) + '...' : element.requestTitle }}</div>
                            </div>
                          </td>
                        </ng-container>

                        <ng-container matColumnDef="requestorName">
                          <th mat-multi-sort-header="requestorName" mat-header-cell *matHeaderCellDef>Requestor Name</th>
                          <td mat-cell *matCellDef="let element">
                            <div class="td-value-name">
                              {{element.requestorName}}
                            </div>
                          </td>
                        </ng-container>

                        <ng-container matColumnDef="requestTypeName">
                          <th mat-multi-sort-header="requestTypeName"  mat-header-cell *matHeaderCellDef>Request Type</th>
                          <td mat-cell *matCellDef="let element" >
                            <div class="td-value-name">
                              {{element.requestTypeName }}
                            </div>
                          </td>
                        </ng-container>

                        <ng-container matColumnDef="department">
                          <th mat-multi-sort-header="department" mat-header-cell *matHeaderCellDef>Department</th>
                          <td mat-cell *matCellDef="let element" >
                            <div class="td-value-name">
                              {{element.departmentName}}
                            </div>
                          </td>
                        </ng-container>

                          <ng-container matColumnDef="requestorPriority">
                            <th mat-multi-sort-header="requestorPriority" mat-header-cell *matHeaderCellDef>Requestor Priority</th>
                            <td mat-cell *matCellDef="let element" >
                              <div class="td-value-name">
                                {{element.requestorPriorityString}}
                              </div>
                            </td>
                          </ng-container>
                  
                          <ng-container matColumnDef="projectTeamPriority">
                            <th mat-multi-sort-header="projectTeamPriority" mat-header-cell *matHeaderCellDef>Project Team Data</th>
                            <td mat-cell *matCellDef="let element">
                              <div class="td-value-name">
                                {{element.projectTeamPriority}}
                              </div>
                            </td>
                          </ng-container>
                  
                          <ng-container matColumnDef="requestDate">
                            <th mat-multi-sort-header="requestDate" mat-header-cell *matHeaderCellDef>Request Date</th>
                            <td mat-cell *matCellDef="let element">
                              <div class="td-value-name">
                                {{element.requestDate | date : 'MM/dd/yyyy'}}
                              </div>
                            </td>
                          </ng-container>
                  
                          <ng-container matColumnDef="targetCompletionDate">
                            <th mat-multi-sort-header="targetCompletionDate" mat-header-cell *matHeaderCellDef>Target Completion Date</th>
                            <td mat-cell *matCellDef="let element">
                              <div class="td-value-name">
                                {{element.targetCompletionDate | date : 'MM/dd/yyyy'}}
                              </div>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="currentStepName">
                            <th mat-multi-sort-header="currentStepName" mat-header-cell *matHeaderCellDef>Current Step Name</th>
                            <td mat-cell *matCellDef="let element" class="align-icon-and-value">
                              <div class="td-value-name current-step-container">
                                <button mat-button (click)="onViewWorkflow($event, element)">
                                  <mat-icon style="padding-right: 10px;">remove_red_eye</mat-icon> {{element.currentStepName}}
                                </button>
                              </div>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="currentApprover">
                            <th mat-multi-sort-header="currentApprover" mat-header-cell *matHeaderCellDef>Current Approver</th>
                            <td mat-cell *matCellDef="let element">
                              <div class="td-value-name" [matTooltip]="element.currentApproverName">
                                {{ element.currentApproverName?.length > 45 ? element.currentApproverName.slice(0,45) + '...' : element.currentApproverName }}
                              </div>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="lastStepCompleted">
                            <th mat-multi-sort-header="lastStepCompleted" mat-header-cell *matHeaderCellDef>
                              Last Step Completed
                            </th>
                            <td mat-cell *matCellDef="let element">
                              <div class="td-value-name">
                                {{ element.lastStepCompleted }}
                              </div>
                            </td>
                          </ng-container>

                          <ng-container matColumnDef="onHold">
                            <th mat-header-cell *matHeaderCellDef class="text-center">On Hold</th>
                            <td mat-cell *matCellDef="let element">
                              <div class="text-center">
                                <!-- <mat-icon class="dragCursor" (mousedown)="dragDisabled = false;"
                                  style="color: rgb(146, 146, 146)">drag_indicator</mat-icon> -->
                                <mat-checkbox [disabled]="!isProjectTeamData" class="no-navigation" color="primary"(change)="onChangeSelect(element, $event, 'OnHold')"
                                [checked]="element.isOnHold"></mat-checkbox>
                              </div>
                            </td>
                          </ng-container>
                      
                          <ng-container matColumnDef="status">
                            <th mat-multi-sort-header="status" mat-header-cell *matHeaderCellDef>Status</th>
                            <td mat-cell *matCellDef="let element">
                              <div>
                                {{ element.statusDisplayString }}
                              </div>
                            </td>
                          </ng-container>

                          <ng-container matColumnDef="actions" stickyEnd > 
                            <th mat-header-cell *matHeaderCellDef class="text-center">Actions</th>
                            <td mat-cell *matCellDef="let element" class="text-center">
                              <div class="action-value-name">
                                <div style="display: flex">
                                  <div (click)="approve($event,element)" *ngIf="element.approveButton && isActionAllowed(element)" class="action-item with-divider text-center">
                                    <mat-icon style="color: #65B741;">check</mat-icon>{{element.approveButton}}
                                  </div>  
                                  <div (click)="reject($event,element)" *ngIf="element.rejectButton && isActionAllowed(element)" class="action-item">
                                    <mat-icon style="color: #DF2E38;">close</mat-icon>{{element.rejectButton}}
                                  </div>
                                </div>
                              </div>
                            </td>
                          </ng-container>
                         
                          <tr mat-header-row *matHeaderRowDef="displayedColumnsTableLeft"></tr>
                          <tr mat-row (click)="viewDetails($event, row)" *matRowDef="let row; columns: displayedColumnsTableLeft"></tr>
                        </table>

#css代码片段

.text-center {
    text-align: center
}

.cursor-pointer {
    cursor: pointer;
}

.sort-button {
    margin-left: 10px;
}

.search-approval {
    width: 300px;
    margin-right: 10px;
    margin-top: -2px;
}

.center-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.no-record {
    margin-top: -60px;
    font-size: 12px;
}

.checkbox-container {
    display: flex;
    align-items: center;
}

.mat-checkbox {
    margin-right: 10px;
    /* Adjust the margin as needed */
}

/* .mat-column-requestorName {
    position: sticky;
    left: 200px;
    z-index: 1;
    background-color: inherit;
} */

/* 
.mat-table-sticky-border-elem-right {
    border-left: 1px solid #e0e0e0;
}

.mat-table-sticky-border-elem-left {
    border-right: 1px solid #e0e0e0;
}

th.mat-column-actions,
td.mat-column-actions {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

th.mat-column-requestTypeName,
td.mat-column-requestTypeName {
    padding-left: 12px;
}

th.mat-column-requestTitle,
td.mat-column-requestTitle {
    padding-right: 12px;
}

th.mat-column-requestorName,
td.mat-column-requestorName {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
 */

th.mat-column-actions,
td.mat-column-actions {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.mat-column-requestorName {
    position: sticky;
    left: 200px;
    z-index: 1;
    background-color: inherit;
    /* border-right: 1px solid #e0e0e0; */

}

.mat-column-requestTitle     {
    background-color: inherit;
    /* border-right: 1px solid #e0e0e0; */

}

th.mat-column-requestorName,
td.mat-column-requestorName {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

th.mat-column-requestTypeName,
td.mat-column-requestTypeName {
    padding-left: 12px;
}