html - 在只读模式和编辑模式之间切换时表格列宽发生变化

标签 html angular

我在 Angular 7 中实现了一个动态生成的 html 表。我还实现了一种切换模式，使用户能够在编辑模式和只读模式之间切换。单击编辑通过显示相应的控件使单元格可编辑。目前我面临的问题是点击编辑按钮会在很大程度上扩展单元格。我需要在任何一种模式下都有固定的宽度。目前，如果您看到 CSS，我已将 min-width 设置为 td 并将 th 设置为 250px。我尝试了 width 和 max-width 属性，但没有用。

只读模式

编辑模式

enter image description here

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>

最佳答案

是的，pindev 是正确的，您只需在可编辑行中设置您的输入样式。我会在单击编辑时向受影响的表行添加一个类。然后你可以把它放到你的 css 文件中:

.yourExtraClassForEditableLines input {
    // your style goes here
}

问候毒药

关于html - 在只读模式和编辑模式之间切换时表格列宽发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56297004/

上一篇：html - 如何使内容在 CSS 网格布局中居中？

下一篇：html - 如何在非矩形 div 中进行分词？

相关文章：

html - 为什么会存在 ID？

node.js - 如何删除或替换 Angular SSR 中的所有 console.log

angular - 在 Angular 13 中进行 Firebase 集成期间找不到名称 'PhoneOrOauthTokenResponse'

css - 来自输入的 Angular 2 组件样式

php - 一天中特定时间的警报声

jquery - 带 JQuery Mobile 的粘性页脚

jquery - 如何使固定顶部 Bootstrap 菜单背景只粘在右边或左边？

html - position absolute html和css问题

angular - 没有 ChildrenOutletContexts 的提供者(注入(inject)错误)

javascript - 即使在清理后，Angular 2 iFrame 也会出现错误

©2024 IT工具网  联系我们