我的工作Angular 11和ng-bootstrap 9.1，我需要做一个表，前3列固定，同时它应该是响应太多，我已经使它固定，但无法找到一个万无一失的解决方案，使其响应（用户界面在某些点中断）。
我知道这个问题和其他一些问题很相似，比如：

• HTML table with fixed headers and a fixed column?
• How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?
• How do I create an HTML table with a fixed/frozen left column and a scrollable body?

我在寻找一个简单的解决方案，比如：

• 在angular或ng-bootstrap中有没有其他方法可以实现这一点？
• 或者有没有什么方法可以在响应方式上很好地防止傻瓜？
• 无法添加外部依赖项或任何内容。*
  用于创建表的组件中的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">
            <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="####" >                                 <input type="checkbox" [(ngModel)]="checkAll" (click)="fnCall($event)">                             </th>
                <th rowspan="2" class="text-center align-middle sticky-col first-col" [ngStyle]="{'left': lockMode?'80px':'0px'}" style="background-color: aliceblue;">                                 Chest Number                               </th>
                <th  rowspan="2" class="text-center align-middle sticky-col  second-col"  [ngStyle]="{'left': lockMode?'180px':'100px'}" 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">                                     {{ rubric.rubricName }} ({{rubric.maxMark}})                                </th>
            </tr>
        </table>
    </div>
</div>

css代码我用它来修复

.view {
    margin: auto;
    width: auto;
    border-collapse: separate;
        border-spacing: 0;
  }
.wrapper {
    position: relative;
    overflow: auto;
    white-space: nowrap;
  }
  
  .sticky-col {
    position: -webkit-sticky;
    position: sticky;
  }
  
  .first-col {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }
  
  .second-col {
    width: 20vw;
    min-width: 20vw;
    max-width: 20vw;
  }
  .check-box {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    left: 0px;
  }