Выравнивание разрывов стола из-за индивидуальной высоты ячейки

Question

Я динамически сгенерировал HTML-таблицу на угловом уровне, просматривая набор записей. Я определил высоту td как 52 пикселя на основе высоты заголовка столбца, которая отображается горизонтально. Как видно на скриншоте, может быть ситуация, когда значения могут содержать больше слов и, следовательно, увеличивать высоту тд. Это нарушает выравнивание таблицы. Может ли кто-нибудь предложить, как сделать это динамичным. Таким образом, если высота конкретной ячейки увеличивается, то она должна применяться ко всей строке.

Скриншот

Ниже 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>