創建由列的表，而不是由

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 */ 
}