Question

我通过遍历记录集动态地生成了一个有角度的html表。我已经根据水平显示的列标题高度将td高度定义为52像素。从屏幕快照中可以看到，这些值可能包含更多单词，从而增加了td的高度。这破坏了表格的对齐方式。有人可以建议如何使其动态化。因此，如果特定单元格的高度增加，则应将其应用于整个行。

屏幕截图

下面是html和css

th,
td {
  padding: 7px;
}


/* .fundClassesTable {
            margin: 0 auto;
            font-size: 11px;
            width: 100%;
        } */

.fundClassesTable tbody {
  display: flex;
}

.fundClassesTable tbody tr {
  flex-grow: 1;
}

.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;
}

tr {
  display: block;
  /* float: left; */
  min-width: 300px;
}

th,
td {
  display: block;
  min-height: 52px;
  /* min-width: 300px; */
}

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;
}

<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">
      <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">


    <table class="fundClassesTable table-striped">

      <tr>
        <th class="tableItem bold">Legal Class Name</th>
        <th class="tableItem bold">Last Edited</th>
        <th class="tableItem bold">Legal Class ID</th>
        <th class="tableItem bold"></th>
        <th class="tableItem bold">TERMS</th>
        <th class="tableItem bold">SUBSCRIPTIONS</th>
        <th class="tableItem bold">Primary Currency</th>
        <th class="tableItem bold">Manager Strategy (populate only if different from Fund Manager Strategy)</th>
        <th class="tableItem bold">Other Currencies</th>
        <th class="tableItem bold">Voting</th>
        <th class="tableItem bold">Hot Issue Eligible</th>
        <th class="tableItem bold">REDEMPTIONS</th>
        <th class="tableItem bold">Standard Redemptions</th>
        <th class="tableItem bold">Frequency</th>
        <th class="tableItem bold">Notice (days)</th>
        <th class="tableItem bold">Notice - Type of Days</th>
        <th class="tableItem bold">Lockup Terms</th>
        <th class="tableItem bold">Lockup Type</th>
        <th class="tableItem bold">Hard Duration (months)</th>
        <th class="tableItem bold">Soft Duration (months)</th>
        <th class="tableItem bold">Fees 0 to 12 months</th>
        <th class="tableItem bold">Fees >12 to 24 months</th>
        <th class="tableItem bold">Fees >24 to 36 months</th>
        <th class="tableItem bold">Other Fees</th>
        <th class="tableItem bold">Lockup Comments</th>
        <th class="tableItem bold">Gating Terms</th>
        <th class="tableItem bold">Apply Gate Declining Balance </th>
        <th class="tableItem bold">Investor Gate % </th>
        <th class="tableItem bold">Fund/Class Gate Type</th>
        <th class="tableItem bold">Fund/Class Gate %</th>
        <th class="tableItem bold">Repayment Terms</th>
        <th class="tableItem bold">Initial Proceeds</th>
        <th class="tableItem bold">Payment (in days)</th>
        <th class="tableItem bold">Payment-Type of Days</th>
        <th class="tableItem bold">Holdback Terms</th>
        <th class="tableItem bold">Holdback Percentage</th>
        <th class="tableItem bold">Holdback Payment (in days)</th>
        <th class="tableItem bold">Holdback-Type of Days</th>
        <th class="tableItem bold"></th>
        <th class="tableItem bold">FEES</th>
        <th class="tableItem bold">Management Fee %</th>
        <th class="tableItem bold">Incentive Fee %</th>
        <th class="tableItem bold">Realization Frequency</th>
        <th class="tableItem bold">High Water Mark</th>
        <th class="tableItem bold">Hurdle Rate</th>
        <th class="tableItem bold">Hurdle Rate Basis</th>
        <th class="tableItem bold">Hurdle Rate %</th>
        <th class="tableItem bold">Hurdle Rate Index</th>
        <th class="tableItem bold">Preferred Return Rate %</th>
        <th class="tableItem bold">GP Catch up</th>
        <th class="tableItem bold">Preferred Return Comments</th>
        <th class="tableItem bold">Clawback</th>
        <th class="tableItem bold">Clawback %</th>
        <th class="tableItem bold">Asset Fee Discounts</th>
        <th class="tableItem bold">Fee Comments</th>
        <th class="tableItem bold">Fee Reductions Negotiated</th>
      </tr>



      <ng-container>
        <!-- <tr *ngFor="let f of fundClass['LegalFundClassDetailsViewModel'] | keyvalue"> -->
        <tr *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel">
          <td class="tableItem">{{f.Description}}</td>
          <td class="tableItem"></td>
          <td class="tableItem">{{f.Id}}</td>
          <td class="tableItem">COMMERCIAL TERMS</td>
          <td class="tableItem">
            <button type="button" class="btn btn-default btn" style="float: left;" (click)="buttonClicked(f.value.Id)">Review Terms</button>
          </td>
          <td colspan="7" class="tableItem"></td>
          <td class="tableItem"> {{f.PrimaryCurrencyName}}</td>

          <td class="tableItem"> To be Implemented</td>
          <td class="tableItem"> {{f.OtherCurrencyName}}</td>
          <td class="tableItem"> {{f.SubVotingName}}</td>
          <td class="tableItem"> {{f.SubVotingName}}</td>
          <td class="tableItem"></td>
          <td class="tableItem"></td>
          <td class="tableItem">{{f.RedsFrqncyName}}</td>
          <td class="tableItem">{{f.RedsNoticeDays}}</td>
          <td class="tableItem">{{f.NoticeTypeOfDaysName}}</td>
          <td class="tableItem"></td>
          <td class="tableItem">{{f.LockupTypeName}}</td>
          <td class="tableItem">{{f.HardDurationMonthsName}}</td>
          <td class="tableItem">{{f.SoftDurationMonthsName}}</td>
          <td class="tableItem">{{f.LockupFees0To12Pct}}</td>
          <td class="tableItem">{{f.LockupFees12To24Pct}}</td>
          <td class="tableItem">{{f.LockupFees24To36Pct}}</td>
          <td class="tableItem">{{f.WebfolioRedsFee}}</td>
          <td class="tableItem">{{f.LockupComments}}</td>
          <td class="tableItem"></td>
          <td class="tableItem">{{f.ApplyGateDecliningBalance}}</td>
          <td class="tableItem"></td>
          <td class="tableItem">{{f.GateSourceName}}</td>
          <td class="tableItem">{{f.GateFundClassPct}}</td>
          <td class="tableItem"></td>
          <td class="tableItem">{{f.IntialProceeds}}</td>
          <td class="tableItem">{{f.PaymentInDays}}</td>
          <td class="tableItem">{{f.PaymentTypeOfDaysName}}</td>
          <td class="tableItem"></td>
          <td class="tableItem">{{f.HoldbackPercentage}}</td>
          <td class="tableItem">{{f.HoldbackPayment}}</td>
          <td class="tableItem">{{f.HoldbackTypeOfDaysName}}</td>
          <td class="tableItem"></td>
          <td class="tableItem">
            <button type="button" class="btn btn-default btn" style="float: left;" (click)="buttonClicked(f.value.Id)">Review Fees</button>
          </td>
          <td class="tableItem">{{f.ManagementFeeRate}}</td>
          <td class="tableItem">{{f.IncentiveFeeRate}}</td>
          <td class="tableItem">{{f.RealizationFrequencyName}}</td>
          <td class="tableItem">{{f.HighWaterMarkName}}</td>
          <td class="tableItem">{{f.HurdleRate}}</td>
          <td class="tableItem">{{f.HurdleRateBasisName}}</td>
          <td class="tableItem">{{f.HurdleRatePct}}</td>
          <td class="tableItem">{{f.HurdleRateIndexName}}</td>
          <td class="tableItem">{{f.PreferredReturnRatePct}}</td>
          <td class="tableItem">{{f.GpCatchUp}}</td>
          <td class="tableItem">{{f.PrefferedReturnComments}}</td>
          <td class="tableItem">{{f.Clawback}}</td>
          <td class="tableItem">{{f.ClawbackPercentage}}</td>
          <td class="tableItem">{{f.AssetFeeDiscountTypeName}}</td>
          <td class="tableItem">{{f.FeeComments}}</td>
          <td class="tableItem">{{f.FeeReductionsNegotiated}}</td>

        </tr>
      </ng-container>
    </table>
  </div>
</div>

由于单个像元高度而导致的表格中断对齐

0 个答案: