转置的 html 表格未正确对齐答案

【问题标题】：Transposed html table not aligned correctly转置的 html 表格未正确对齐
【发布时间】：2019-04-30 17:49:10
【问题描述】：

我在动态填充行的角度应用程序中实现了 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 的评论输出

【问题讨论】：

标签： html css angular

【解决方案1】：

这是纯 CSS 解决方案（假设您已经将表格中的 div 替换为 ng-container），但是当单元格内的文本太长时它会中断。

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

您可以在这里找到一个 JS 解决方案：https://stackoverflow.com/a/23556911

【讨论】：

【解决方案2】：

正如我们所见，在转置前为空的单元格值在转置后会出现错位。请尝试为转置后的单元格添加一个最小高度。

tr {
   display: block;
   float: left;
}

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

【讨论】：

我尝试了您的解决方案并在帖子中发布了输出。更好但尚未完全对齐
由于单元格没有预定义的宽度和高度，即，请分配相同的值。在我们的例子中，它应该是转置前的宽度，td { min-width: 200px; } 和转置后指定的高度。 //根据需要更改值。