使用Angular和CSS的表列中的粘滞单元格

我已经做了一个表，其中有动态数据使用角度，但我需要修复一些列和其他将是水平滚动。我在下面解释我的代码

<div id="table-scroll" class="table-scroll">
     <div class="table-wrap">
         <table class="main-table">
              <tbody *ngIf="ColumnNames.length > 1"> 
                  <tr *ngFor="let opt of ConfigArr; let i = index;">
                         <td class="fixed-side">
                            {{opt.attrName1}}({{opt.attr1}})
                          </td>
                         <td>
                            {{opt.attrName2}}({{opt.attr2}})
                        </td>
                       <td>
                            <input class="form-control" matInput placeholder="MRP" aria-label="MRP" [value]="opt.MRP">
                       </td>
                      <td>
                         <input class="form-control" matInput placeholder="BaseUnitPrice" aria-label="BaseUnitPrice" [value]="opt.BaseUnitPrice">
                     </td>
                     <td>
                        <input class="form-control" matInput placeholder="DiscountValue" aria-label="DiscountValue" [value]="opt.DiscountValue">
                     </td>
                     <td>
                       <input class="form-control" class="form-control" matInput placeholder="MinBuyQty" aria-label="MinBuyQty" [value]="opt.MinBuyQty">
                      </td>
                      <td>
                        <input class="form-control" matInput placeholder="MinimumPrice" aria-label="MinimumPrice" [value]="opt.MinimumPrice">
                     </td>
                     <td>
                        <input class="form-control" matInput placeholder="TaxPercentage" aria-label="TaxPercentage" [value]="opt.TaxPercentage">
                    </td>
                    <td>
                      <input class="form-control" matInput placeholder="TaxAmount" aria-label="TaxAmount" [value]="opt.TaxAmount">
                    </td>
                    <td>
                       <input class="form-control" matInput placeholder="DiscountPrice" aria-label="DiscountPrice" [value]="opt.DiscountPrice">
                    </td>
                    <td>
                     <input class="form-control" matInput placeholder="MaxBuyQty" aria-label="MaxBuyQty" [value]="opt.MaxBuyQty">
                  </td>
                  <td>
                      <input class="form-control" matInput placeholder="MaximumPrice" aria-label="MaximumPrice" [value]="opt.MaximumPrice">
                     </td>
                  </tr>
             </tbody>

        </table>
    </div>
</div>

这里我有这个表，它有动态数据。因为这有很多列，所以我需要修复前两列，其他列将水平滚动。我已经做了css，但它不工作

我希望这对你有帮助

。表格滚动{
位置：相对位置；
最大宽度：1000px；
保证金：自动；
溢出：隐藏；
边框：1px实心#000；
}
.桌套{
宽度：100%；
溢出：自动；
溢出-x：滚动；
溢出y：可见；
左边距：240px；
}
.表格滚动表格{
宽度：100%；
保证金：自动；
边界塌陷：分离；
边界间距：0；
}
.table scroll th、.table scroll td{
填充物：5px10px；
边框：1px实心#000；
背景：#fff；
空白：nowrap；
垂直对齐：顶部；
}
.table scroll thead、.table scroll tfoot{
背景#f9f9f9；
}
.克隆{
位置：绝对位置；
排名：0；
左：0；
指针事件：无；
}
.clone th、.clone td{
可见性：隐藏
}
.clone td、.clone th{
边框颜色：透明
}
.克隆体{
能见度：可见；
颜色：红色；
}
.克隆.固定端{
边框：1px实心#000；
背景：#eee；
能见度：可见；
}
.clone thead、.clone tfoot{background:transparent；}
.修理{
位置：绝对位置；
*位置：相对；/*ie7*/
左边距：-120px；
宽度：100px；
最小高度：21px；
}
.fix2{
位置：绝对位置；
*位置：相对；/*ie7*/
左边距：-240px；
宽度：100px；
最小高度：21px；
}

sfgss
sfgss

.table-scroll {
    position:relative;
    max-width:1000px;
    margin:auto;
    overflow:hidden;
    border:1px solid #000;
}
.table-wrap {
    width:100%;
    overflow:auto;
}
.table-scroll table {
    width:100%;
    margin:auto;
    border-collapse:separate;
    border-spacing:0;
}
.table-scroll th, .table-scroll td {
    padding:5px 10px;
    border:1px solid #000;
    background:#fff;
    white-space:nowrap;
    vertical-align:top;
}
.table-scroll thead, .table-scroll tfoot {
    background:#f9f9f9;
}
.clone {
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}
.clone th, .clone td {
    visibility:hidden
}
.clone td, .clone th {
    border-color:transparent
}
.clone tbody th {
    visibility:visible;
    color:red;
}
.clone .fixed-side {
    border:1px solid #000;
    background:#eee;
    visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}