在只读和编辑模式之间切换时，表列的宽度发生变化
我已经实现了角度为7的动态生成的html表。我还实现了切换模式，使用户可以在编辑模式和只读模式之间切换。单击编辑，通过显示相应的控件使单元格可编辑。当前，我面临的问题是单击“编辑”按钮正在很大程度上扩展单元格。无论哪种模式，我都需要固定宽度。目前，如果您看到CSS，我已经将min-width设置为td，并将th设置为250px。我尝试了width和max-width属性，但是没有用。
只读模式
编辑模式
html组件
<style>
th,
td {
padding: 7px;
min-width: 250px;
}
.btn {}
.tableItem {
text-align: center;
border-left: solid 1px lightgrey;
border-top: solid 1px lightgrey;
border-right: solid 1px lightgrey;
border-bottom: solid 1px lightgrey;
}
.rowItem:hover {
background-color: #f5f7f7;
}
label {
margin-left: 0.5rem;
vertical-align: middle
}
.panel-heading {
color: white;
background-color: #F59850;
border-color: #ddd;
overflow: hidden;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.panel-heading .left-label {
display: inline-block;
padding-top: 5px !important;
}
.scrollClass {
overflow-x: scroll;
display: grid;
}
.panel-heading label {
margin-bottom: 0px !important;
}
</style>
<div>
<input type="checkbox" id="chk" style="width: 13px; height: 13px;" checked="checked"
(click)="isInvestedSelected($event)" />
<label for="chkInvested">Invested</label>
</div>
<div class="card scrollClass">
<div class="card-header panel-heading">
<span class="left-label" style="font-size: 18px; font-weight: bold; ">Legal Fund Classes</span>
<div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
<!-- <label style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"> <i
data-bind="visible: true" class="fa fa-plus-square"></i><input type="checkbox" class="hidden" /> Add
Class</label> -->
<button style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"
(click)="openFundClassModal()"> <i data-bind="visible: true" class="fa fa-plus-square"></i> Add
Class</button>
</div>
</div>
<div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetailsViewModel && ColumnNames">
<table class="fundClassesTable table-striped">
<tr *ngFor="let c of ColumnNames">
<th class="tableItem bold">{{ c }}</th>
<ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel; let i=index">
<td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
<td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
<td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
<td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
<td class="tableItem" *ngIf="c == ColumnNames[4]">
<div *ngIf="EditMode[f.Id]">
<button type="button" class="btn btn-default btn" style="float: left;"
(click)="reviewClicked(f.Id,1)">Review Terms</button>
{{reviewTerm}}
</div>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[5] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[6]" class="tableItem"> {{f.PrimaryCurrencyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[6]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.CurrencyId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.Currencies"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[7]" class="tableItem"> {{f.ManagerStrategyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[7]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.ManagerStrategyId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.ManagerStrategies" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[8]" class="tableItem"> {{f.OtherCurrencyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[8]" class="tableItem">
<kendo-multiselect [data]="LegalFundClasses.Currencies" style="width:100%; height: 29.5px;" [(ngModel)]="f.OtherCurrencyName" [textField]="'Name'"
[valueField]="'Id'" [autoClose]="false">
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<input type="checkbox" class="k-checkbox" [checked]="isItemSelected(dataItem.Name)">
<label class="k-checkbox-label">{{ dataItem.Name }}</label>
</ng-template>
</kendo-multiselect>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[9]" class="tableItem"> {{f.SubVotingName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[9]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.SubVotingId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqVoting"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[10]" class="tableItem"> {{f.SubHotIssueName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[10]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.SubHotIssueId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqHotIssue"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[11] && i<1" ></td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[12] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[13]" class="tableItem">{{f.RedsFrqncyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[13]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.RedsFrqncyId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqRedsFrequency"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[14]" class="tableItem">{{f.RedsNoticeDays}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[14]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.RedsNoticeDays" style="width: 100%; height: 29.5px;" > -->
<kendo-numerictextbox [(ngModel)]="f.RedsNoticeDays" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[15]" class="tableItem">{{f.NoticeTypeOfDaysName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[15]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.NoticeTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[16] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[17]" class="tableItem">{{f.LockupTypeName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[17]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.LockupTypeId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqLockupType"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[18]" class="tableItem">{{f.HardDurationMonthsName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[18]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HardDurationMonthsId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqDurationMonths" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[19]" class="tableItem">{{f.SoftDurationMonthsName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[19]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.SoftDurationMonthsId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqDurationMonths" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[20]" class="tableItem">{{f.LockupFees0To12Pct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[20]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.LockupFees0To12Pct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees0To12Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[21]" class="tableItem">{{f.LockupFees12To24Pct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[21]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.LockupFees12To24Pct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees12To24Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[22]" class="tableItem">{{f.LockupFees24To36Pct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[22]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.LockupFees24To36Pct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees24To36Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[23]" class="tableItem">{{f.WebfolioRedsFee}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[23]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.WebfolioRedsFee" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.WebfolioRedsFee" style="width:100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[24]" class="tableItem">{{f.LockupComments}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[24]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.LockupComments" style="width: 100%; height: 29.5px;" />
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[25] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[26]" class="tableItem">
{{f.ApplyGateDecliningBalance === 'true' ? 'Yes' : 'No'}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[26]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="{{f.ApplyGateDecliningBalance}}"
style="width: 13px; height: 13px;" /> Yes </label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[27]" class="tableItem">{{f.GateInvestorPct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[27]" class="tableItem"><input kendoTextBox [(ngModel)]="f.GateInvestorPct"
style="width: 100%; height: 29.5px;" /></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[28]" class="tableItem">{{f.GateSourceName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[28]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.GateSourceId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqGateSource"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[29]" class="tableItem">{{f.GateFundClassPct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[29]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.GateFundClassPct" style="width:100%; height: 29.5px;" />
</td>
<td class="tableItem" *ngIf="c == ColumnNames[30]"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[31]" class="tableItem">{{f.IntialProceeds}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[31]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.IntialProceeds" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[32]" class="tableItem">{{f.PaymentInDays}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[32]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.PaymentInDays" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[33]" class="tableItem">{{f.PaymentTypeOfDaysName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[33]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.PaymentTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td class="tableItem" *ngIf="c == ColumnNames[34]" ></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[35]" class="tableItem">{{f.HoldbackPercentage}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[35]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.HoldbackPercentage" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[36]" class="tableItem">{{f.HoldbackPayment}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[36]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.HoldbackPayment" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[37]" class="tableItem">{{f.HoldbackTypeOfDaysName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[37]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HoldbackTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[38] && i<1"></td>
<td class="tableItem" *ngIf="c == ColumnNames[39]">
<button type="button" class="btn btn-default btn" style="float: left;"
(click)="reviewClicked(f.value.Id,2)">Review Fees</button>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[40]" class="tableItem">{{f.ManagementFeeRate}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[40]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.ManagementFeeRate" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.ManagementFeeRate" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[41]" class="tableItem">{{f.IncentiveFeeRate}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[41]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.IncentiveFeeRate" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.IncentiveFeeRate" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[42]" class="tableItem">{{f.RealizationFrequencyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[42]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.RealizationFrequencyId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqFrequencys" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[43]" class="tableItem">{{f.HighWaterMarkName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[43]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HighWaterMarkId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHighWaterMarks" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[44]" class="tableItem">{{f.HurdleRate === 'true' ? 'Yes' : 'No'}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[44]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="{{f.HurdleRate}}" style="width: 13px; height: 13px;" /> Yes
</label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[45]" class="tableItem">{{f.HurdleRateBasisName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[45]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HurdleRateBasisId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHurdleRateBasis" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[46]" class="tableItem">{{f.HurdleRatePct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[46]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.HurdleRatePct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.HurdleRatePct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[47]" class="tableItem">{{f.HurdleRateIndexName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[47]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HurdleRateIndexId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHurdleRateIndex" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[48]" class="tableItem">{{f.PreferredReturnRatePct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[48]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.HurdleRatePct" style="width: 100%; height: 29.5px;" /> -->
<kendo-numerictextbox [(ngModel)]="f.PreferredReturnRatePct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[49]" class="tableItem">{{f.GpCatchUp}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[49]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.GpCatchUp" style="width:100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[50]" class="tableItem">{{f.PrefferedReturnComments}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[50]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.PrefferedReturnComments"
style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[51]" class="tableItem">{{f.Clawback === 'true' ? 'Yes' : 'No'}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[51]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="{{f.Clawback}}" style="width: 13px; height: 13px;" /> Yes
</label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[52]" class="tableItem">{{f.ClawbackPercentage}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[52]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.ClawbackPercentage" style="width: 100%; height: 29.5px;" /> -->
<kendo-numerictextbox [(ngModel)]="f.ClawbackPercentage" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[53]" class="tableItem">{{f.AssetFeeDiscountTypeName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[53]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.AssetFeeDiscountTypeId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.FeeDicountTypes" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[54]" class="tableItem">{{f.FeeComments}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[54]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.FeeComments" style="width: 100%; height: 29.5px;" /> -->
<textarea kendoTextArea [(ngModel)]="f.FeeComments" style="width: 100%; height:200px;" ></textarea>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[55]" class="tableItem">{{f.FeeReductionsNegotiated === 'true' ? 'Yes' : 'No'}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[55]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="{{f.FeeReductionsNegotiated}}"
style="width: 13px; height: 13px;" /> Yes </label>
</td>
<td class="tableItem" *ngIf="c == ColumnNames[56]">
<button *ngIf="!EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-4"
(click)="buttonClicked(f.Id)">Edit</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="Update(f.Id)">Save</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="Delete(f.Id)">Delete</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="buttonClicked(f.Id)">Cancel</button>
</td>
</ng-container>
</tr>
</table>
</div>
</div>
1 个答案:
答案 0 :(得分：0)
是的，pindev是正确的，您只需要在可编辑的行中设置输入的样式即可。我将在单击编辑时将一个Class添加到受影响的表行中。那么您可以将其放入您的CSS文件中：
.yourExtraClassForEditableLines input {
// your style goes here
}
格里兹毒素
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？