在只读和编辑模式之间切换时表格列宽发生变化
Posted
技术标签:
【中文标题】在只读和编辑模式之间切换时表格列宽发生变化【英文标题】：table column width changing while toggling between readonly and edit mode 【发布时间】：2019-10-11 07:32:08 【问题描述】：我已经在 Angular 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>
【问题讨论】：
既然你所有的th, td 都有一个tableItem 类，那么如果你在那个类上应用max-width 呢？
试过没区别
您可以尝试的另一件事是同时提供max-width 和min-width。如果这不起作用，那么您可以在您的 table 上尝试 table-layout: fixed;
我尝试了最大宽度和最小宽度，但它没有工作。我也试过 th, td padding: 7px;最小宽度：250px；最大宽度：250px； .fundClassesTable 表格布局：固定；
你检查过编辑控件的宽度和高度吗？即text input 有自己的最小高度，因为它有填充、字体大小和行高。你能创建一个 jsffidle 或 stackblitz 来复制你的问题吗？
【参考方案1】：
是的，pindev 是对的，您只需在可编辑行中设置输入样式。我会在点击编辑时向受影响的表行添加一个类。然后你可以把它变成你的css文件：
.yourExtraClassForEditableLines input
// your style goes here
Greetz Toxi
【讨论】：
你是否建议我在这个类中添加 max-width : 250 px 以及我在哪里应用这个类 是的，完全正确。您可以将其设置为您想要的任何高度。只需将其放在您的自定义 css 文件中即可。 我删除了到处设置的宽度，只保留在 td css 类中。我在 td 类中将 min-width 和 max-width 设置为 250 px。所以现在在编辑时它保留为 250 像素。但我真正想要的是，如果只有两个 td，它们应该将容器平均填充到每个容器的 50%以上是关于在只读和编辑模式之间切换时表格列宽发生变化的主要内容，如果未能解决你的问题，请参考以下文章