Angular 11实现首3列固定且响应式滚动表格的方案求助

核心问题解答 #

1. Angular/ng-bootstrap原生支持？ #

Angular 11和ng-bootstrap 9.1没有提供原生的「固定多列+响应式」表格组件，无需引入外部依赖，基于现有代码通过CSS自定义+Angular逻辑即可实现需求。

2. 可靠的响应式实现方案 #

结合你已有的代码，通过以下步骤修复UI错乱并实现响应式适配：

步骤1：修复固定列的动态定位（避免硬编码错位） #

你当前的left值是硬编码的px值，响应式下会因为屏幕尺寸变化导致列错位。改用CSS变量动态计算偏移量，配合Angular的ngStyle调整：

修改后的HTML代码

<div class="row mb-2 view" *ngIf="value1.length">
    <div class="col-md-12 mb-2 wrapper" style="max-height: 65vh; overflow-y: auto;">
        <table class="bg-white roundedCorner table-sm table table-bordered" style="table-layout: fixed;">
            <tr class="font-weight-bolder text-monospace" style="background-color: aliceblue; font-size: 1em;">
                <th class="text-center align-middle sticky-col check-box" rowspan="2" *ngIf="showCheckbox">
                    <input type="checkbox" [(ngModel)]="checkAll" (click)="fnCall($event)">
                </th>
                <th rowspan="2" class="text-center align-middle sticky-col first-col" [ngStyle]="{'left': lockMode ? 'var(--checkbox-width)' : '0'}" style="background-color: aliceblue;">
                    Chest Number
                </th>
                <th rowspan="2" class="text-center align-middle sticky-col second-col" [ngStyle]="{'left': lockMode ? 'calc(var(--checkbox-width) + var(--first-col-width))' : 'var(--first-col-width)'}" style="background-color: aliceblue;">
                    Project Name
                </th>
                <th [attr.colspan]="rubrics.length" class="text-center align-middle">
                    Rubrics
                </th>
                <th class="text-center align-middle" rowspan="2" style="max-width: 80px;">
                    Total Mark
                </th>
                <th class="text-center align-middle" rowspan="2">
                    Remarks
                </th>
            </tr>
            <tr class="text-monospace text-center align-middle font-italic font-bold" style="background-color: azure;">
                <th *ngFor="let rubric of rubrics" style="white-space: normal;">
                    {{ rubric.rubricName }} ({{rubric.maxMark}})
                </th>
            </tr>
            <!-- 表格行数据部分需对应添加sticky-col类 -->
            <tr *ngFor="let item of value1">
                <td *ngIf="showCheckbox" class="sticky-col check-box">...</td>
                <td class="sticky-col first-col">{{ item.chestNumber }}</td>
                <td class="sticky-col second-col">{{ item.projectName }}</td>
                <!-- 其他列内容 -->
            </tr>
        </table>
    </div>
</div>

修改后的CSS代码

:root {
    --checkbox-width: 25px;
    --first-col-width: 100px;
    --second-col-width: 20vw;
}

.view {
    margin: auto;
    width: auto;
    border-collapse: collapse; /* 修复边框错位 */
}

.wrapper {
    position: relative;
    overflow: auto;
    white-space: nowrap;
}

.sticky-col {
    position: -webkit-sticky;
    position: sticky;
    z-index: 10; /* 避免滚动时被其他列覆盖 */
    background-color: inherit; /* 继承行背景色，防止透明 */
}

.check-box {
    width: var(--checkbox-width);
    min-width: var(--checkbox-width);
    max-width: var(--checkbox-width);
    left: 0;
}

.first-col {
    width: var(--first-col-width);
    min-width: var(--first-col-width);
    max-width: var(--first-col-width);
}

.second-col {
    width: var(--second-col-width);
    min-width: 180px; /* 小屏幕下最小宽度，避免内容挤压 */
    max-width: 300px; /* 大屏幕下最大宽度，防止过宽 */
}

/* 响应式适配：小屏幕（md以下） */
@media (max-width: 768px) {
    :root {
        --first-col-width: 80px;
        --second-col-width: 30vw;
    }
    .table th, .table td {
        font-size: 0.85em; /* 缩小字体 */
        padding: 0.5rem; /* 减少内边距 */
    }
    /* 可选：隐藏非核心列，比如Remarks */
    .table th:nth-last-child(1), .table td:nth-last-child(1) {
        display: none;
    }
}

步骤2：关键UI错乱修复要点 #

1. 行高对齐：确保所有th和td的内边距、行高一致，避免滚动时固定列和普通列的行错位
2. 边框合并：使用border-collapse: collapse替代separate，解决固定列边框错位问题
3. 背景色继承：给sticky-col添加background-color: inherit，防止滚动时固定列透明露出下方内容
4. z-index层级：给固定列设置z-index，确保滚动时不会被其他列覆盖

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