Question

我在Angular应用程序中实现了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的解决方案（假设您已经用div替换了表中的ng-container），但是当单元格中的文本太长时，它将中断。

>

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
}

转置的html表未正确对齐

2 个答案: