创建由列的表，而不是由

Question

行

我有我需要从他们的名单在表打印的东西，比较特征的以特色B.

然而，因为它是现在对象的列表，在进行表格渲染时，A中的所有项目都是连续的，B中的所有项目都是连续的，而不是A中的项目和下一列中的B项目。

我在做类似的东西..

<div style="display: table;"> 
    @foreach(var OuterItem in Outer) { 
     <div style="table-row"> 
      @foreach(var InnerItem in OuterItem.SubItems) { 
      <div style="table-cell"> 
       @Html.Raw(InnerItem.Property) 
      </div> 
      } 
     </div> 
    } 
</div> 

这会产生一些看起来像

| A1 | A2 | A3| 
| B1 | B2 | B3| 

但是我正在寻找的表..

| A1 | B2 | 
| A2 | B2 | 
| A3 | B3 | 

有没有办法做我的循环会产生该表？

移调数据似乎也不必要，但我可能是错的。

Answer 1

我不确定您的Outer和SubItems集合的背衬结构是什么。如果它们是可转位，并有相同数量的SubItems，比你也许可以做这样的事情：

<div style="display: table;"> 
    @for(var j = 0; j < Outer[0].SubItems.Count; j++) { 
     <div style="table-row"> 
      @for(var i = 0; i < Outer.Count; i++) {    
      <div style="table-cell"> 
       @Html.Raw(Outer[i].SubItems[j].Property) 
      </div> 
      } 
     </div> 
    } 
</div> 

在小规模，并假设你总是有至少一个Outer项目，这应该是很好，但是从一个性能站点访问这样的项目没有这样的（内存）缓存友好。

这可能是最好的留给你原本的环结构，只是使用CSS两列位置重新设计你的HTML并排侧：

<div id="container"> 
    @for(var j = 0; j < Outer[0].SubItems.Count; j++) { 
     <div style="tablecolumn"> 
      @for(var i = 0; i < Outer.Count; i++) {    
      <div class="tablecell"> 
       @Html.Raw(Outer[i].SubItems[j].Property) 
      </div> 
      } 
     </div> 
    } 

    <!-- make sure the container layout is displayed correctly by adding a clear fix --> 
    <div class="clearfix"></div> 
</div> 

和风格的tablecolumn和tablecell在CSS中在垂直列中显示元素。我认为最重要的是确保所有元素都具有相同的高度，以免错位。

.tablecolumn { 
    float: left; 
    width: 49%; 
} 

.tablecell { 
    height: 25px; /* or whatever value you find appropriate */ 
}