轉置的html表未正確對齊

Question

我有角度應用程序中實現的html表，它是動態填充的行。 我需要轉置，以便列呈現為行。

我已設法應用css轉置它但對齊不正確。 有人可能會建議解決這個問題

正如你在css中看到的，我習慣了轉置

tr {
  display: block;
  float: left;
}
th, td {
  display: block;
}

原始表

換位表

HTML

<style>

    th,
    td {
        padding: 7px;
    }

    .fundClassesTable {
        margin: 0 auto;
        font-size: 11px;
    }

    .tableItem {
        text-align: center;
        border-left: solid 1px lightgrey;
        border-top: solid 1px lightgrey;
        border-right: solid 1px lightgrey;
        border-bottom: solid 1px lightgrey;
        width: 100px
    }

    .rowItem:hover {
        background-color: #f5f7f7;
    }

/*
    tr {
  display: block;
  float: left;
}
th, td {
  display: block;
}
    */




</style>


<div *ngIf="FundClasses && FundClasses.FundDetailsViewModel">

    <table class="fundClassesTable" >

        <tr>
            <th class="tableItem bold">Accounting Class Name</th>
            <th class="tableItem bold">Class ID</th>
            <th class="tableItem bold">Legal Fund Class</th>
            <th class="tableItem bold">Inception Date</th>
            <th class="tableItem bold">Invested Amount</th>
            <th class="tableItem bold">Vehicle Type</th>
            <th class="tableItem bold">Closure Status</th>
            <th class="tableItem bold">Is Side Pocket?</th>
            <th class="tableItem bold">Is Thematic?</th>
            <th class="tableItem bold">Cogency Class?</th>
        </tr>

        <div *ngFor="let fundClass of FundClasses.FundDetailsViewModel" >
            <tr *ngFor="let f of fundClass['FundClassDetailsViewModel'] | keyvalue">
                <td class="tableItem">{{ f.value.Description}}</td>
                <td class="tableItem">{{f.value.Id}}</td>
                <td class="tableItem">{{ f.value.LegalFundClassId}}</td>
                <td class="tableItem">{{f.value.InceptionDate}}</td>
                <td class="tableItem">{{ f.value.InvestedAmount}}</td>
                <td class="tableItem">{{f.value.ClosureStatusId}}</td>
                <td class="tableItem">{{ f.value.VehicleTypeId}}</td>
                <td class="tableItem">{{f.value.IsSidePocket}}</td>
                <td class="tableItem">{{ f.value.IsThematic}}</td>
                <td class="tableItem">{{f.value.CogencyClassId}}</td>
            </tr>
        </div>


    </table> 


</div>

輸出基於Sashi的評論

Answer 1

這是僅限CSS的解決方案（假設您已經用ng-container替換了表中的div ），但是當單元格內的文本太長時它就會中斷。

table tr > * {
    display: block;
}
table tr {
    display: table-cell;
}

您可以在此處找到JS解決方案： https ： //stackoverflow.com/a/23556911

Answer 2

我們可以看到，在轉置之前空白的單元格值在轉置后會變得不對齊。 換位后，請嘗試為細胞添加最小高度。

tr {
   display: block;
   float: left;
}

th, td {
  display: block;
  min-height: 20px; //change the value as per your need
}