【发布时间】：2020-05-21 08:24:08
【问题描述】：
我使用 Angular 制作了一张包含动态数据的表，但我需要修复一些列，而其他列将是水平滚动的。我在下面解释我的代码。
<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;}
这里我有一张包含动态数据的表格。由于这有很多列，所以我需要修复前两列，其他列将水平滚动。我在 css 中做过，但它不起作用。
【问题讨论】：
标签： css angular html-table