Angular粘性表格：移除Requestor Name列左侧阴影

架构老林

2026-7-2

问题

我实现了一个Angular粘性表格，其中第一列Request Title、第二列Requestor Name和最后一列Actions均为粘性列。当前Requestor Name列左右两侧都存在box shadow，我希望仅保留其右侧阴影，移除左侧阴影。

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

解决方案

修改Requestor Name列的box-shadow样式，将水平偏移值设为正数，让阴影仅出现在元素右侧：

替换原CSS中这段代码：

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

为：

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

原理说明

box-shadow的语法为 水平偏移垂直偏移模糊半径颜色：

水平偏移设为正数时，阴影向元素右侧延伸
设为0时，阴影向左右两侧同时扩散
设为负数时，阴影向元素左侧延伸

通过将水平偏移改为4px，就可以只保留右侧阴影，消除左侧的阴影效果。

内容的提问来源于stack exchange，提问作者Mr. Mark Tawin

Angular粘性表格：移除Requestor Name列左侧阴影

问题 #

HTML代码 #

CSS代码 #

解决方案 #

原理说明 #

问题

HTML代码

CSS代码

解决方案

原理说明