Sticky cell in table columns using Angular and CSS

Question

I have made one table which has dynamic data using Angular but I need to fix some columns and others will be horizontal scroll. I am explaining my code below.

<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::

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

Here I have this table which has dynamic data. As this has many columns so I need to fix first two column and others will scroll horizontally. I have done in css but its not working.

Answer 1

i hope this will help you!

.table-scroll {
    position:relative;
    max-width:1000px;
    margin:auto;
    overflow:hidden;
    border:1px solid #000;
}
.table-wrap {
    width:100%;
    overflow:auto;
  overflow-x: scroll;
  overflow-y: visible;
  margin-left: 240px;
}
.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;}
.fix {
  position: absolute;
  *position: relative; /*ie7*/
  margin-left: -120px;
  width: 100px;
  min-height: 21px;
}
.fix2 {
  position: absolute;
  *position: relative; /*ie7*/
  margin-left: -240px;
  width: 100px;
  min-height: 21px;
}

<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;">
                         <th class="fix">
                           sfgss
                          </th> 
                         <th class="fix2">
                           sfgss
                          </th>
                       <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>