需要幫助正確使用圖像和列格式化表格

在我的應用程序中，我有一個查看誰的任務是顯示與此項目相關的項目和價格。需要幫助正確使用圖像和列格式化表格

這是我的看法是如何呈現這些表的結果：

@if (Model.Count > 0) 
{ 
    <table> 
     <tr> 
      <th> 
       @Html.ActionLink("Object Name", "BrowseObjectList", new { _sortOrder = ViewBag.CardNameSortParm }) 
      </th> 
      <th> 
       Object Image 
      </th> 
      <th> 
       @Html.ActionLink("Object Provider Name", "BrowseObjectList", new { _sortOrder = ViewBag.ObjectProviderNameSortParm }) 
      </th> 
      <th> 
       @Html.ActionLink("Highest Price", "BrowseObjectList", new { _sortOrder = ViewBag.HighestPriceSortParm }) 
      </th> 
      <th> 
       @Html.ActionLink("Price Date", "BrowseObjectList", new { _sortOrder = ViewBag.PriceDateSortParm }) 
      </th> 
     </tr> 

     @for (int i = 0; i < Model.Count; i++) 
     { 
      var className = i%2 == 0 ? "even" : "odd"; 
      <tr class="@className"> 
       <th rowspan="5"> 
        @Html.ActionLink(Model[i].m_Obj.m_ObjName, "ObjectPriceLists", new { id = Model[i].m_Obj.m_ID}, new {@class = "NavLink" }) 
       </th> 
       <th rowspan="5"> 
        @Html.Image(Model[i].m_Obj.m_ObjImageLink, Model[i].m_Obj.m_ObjName, null) 
       </th> 
       @for (int j = 0; j < Model[i].m_ItemPriceLists.Count; j++) 
       { 
        <tr class="@className"> 
         <td style="height: 100%">@Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_Provider.m_ProviderName)</td> 
         <td style="height: 100%">@Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_PriceHigh)</td> 
         <td style="height: 100%">@Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_PriceListDate)</td> 
        </tr> 
       } 
      </tr> 
     } 
    </table> 
}

現在，它使「好」的觀點形狀達到我想要的東西，這樣的事情：

Object Name Object Image Provider Highest Price Price Date 
          Prov 1     1 2013-05-03 
          Prov 2     2 2013-05-03 
Object 1 Image   Prov 3     3 2013-05-03 
          Prov 4     4 2013-05-03

現在這是通緝的結果。「對象名稱」列是單列，就像在Excel頁面中一樣，圖像也是單列。每個「供應商/最高價格/價格日期」是同一行上的單行作爲對象名稱和圖像。不過我有什麼東西形狀像這樣：

Object Name Object Image Provider Highest Price Price Date 
          Prov 1   1   2013-05-03 
          Prov 2   2   2013-05-03 
          Prov 3   3   2013-05-03 


Object 1 Image   Prov 4   4   2013-05-03

你需要在這裏看到的是什麼四號線提供高度調整大小以匹配圖像和對象的比例。「對象1」列和「圖像」取得圖像的高度，但高度不會在每四個提供者之間均勻分配。只有第四次調整才能填滿剩餘空間。

現在我知道我的html佈局可能很糟糕，因爲我開始在html格式，並且我想知道如何正確地塑造它，以便每條線均勻大小。

編輯

我的情況下是很難形容，但這裏有我想要的一個excel示範和我得到了什麼：

Problem example using excel

來源

2013-05-03 hsim

也許你的數據庫中有一些空白的數據，所以它實際上看起來很正確，它只是插入兩個不包含數據的額外行。調試，並且在模型綁定之前，查看集合實際擁有的內容。您也不需要指定表格中每個單元格的高度。 – 2013-05-03 12:44:32

好吧，我會檢查出來，告訴你我發現了什麼。 – hsim 2013-05-03 12:46:40

如果你看看你如何呈現你的html，你正在渲染的的內部。將最後一個向上移動，就在'@for（int j' – 2013-05-03 12:46:52

這可能需要一些調整，從你的身邊，但我想像這樣的事情應該這樣做：

@for (int i = 0; i < Model.Count; i++) 
    { 
     var className = i%2 == 0 ? "even" : "odd"; 
     @for (int j = 0; j < Model[i].m_ItemPriceLists.Count; j++) 
     { 
      <tr class="@className" style="height:38px;"> 
      @if(j == 0) { 
       <td rowspan="4"> 
        @Html.ActionLink(Model[i].m_Obj.m_ObjName, "ObjectPriceLists", new { id = Model[i].m_Obj.m_ID}, new {@class = "NavLink" }) 
       </td> 
       <td rowspan="4"> 
        @Html.Image(Model[i].m_Obj.m_ObjImageLink, Model[i].m_Obj.m_ObjName, null) 
       </td> 
      } else { 
       <td></td> 
      } 
       <td> @Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_Provider.m_ProviderName)</td> 
       <td> @Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_PriceHigh)</td> 
       <td> @Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_PriceListDate)</td> 
      </tr> 
     } 
    }

Dtyle your rows wit公頃固定的高度像素，是圖像高度/ rowspan .. http://jsfiddle.net/vUKfX/2/

來源

2013-05-03 13:23:07

是的，固定高度，150像素高。 – hsim 2013-05-03 13:54:53

和固定行數？ – 2013-05-03 14:03:04

那麼，你會看到上面的結構。唯一會改變的是Model.Count;取決於結果，它可能是1或245項，或更多。 – hsim 2013-05-03 14:06:35

我假設這個問題的原因是因爲你的圖像比組合的四個數據行的高度更長，並且你想要的行的比例一樣。

您有幾種選擇。您可以簡單地將圖像單元格的rowspan =「5」更改爲rowspan =「6」，這將允許它在不縮放底部數據行的情況下刪除一行。但這可能很難看。

這裏有一個更好看的解決方案，得到你想要的東西，但它是醜陋的代碼（邊境增加了可視化）：

<!DOCTYPE html> 
<html> 
<body> 
    <table border="1"> 
    <tr> 
    <th>Object Name 
    </th> 
    <th>Object Image 
    </th> 
    <th>Object Provider Name 
    </th> 
    <th>Highest Price 
    </th> 
    <th>Price Date 
    </th> 
    </tr> 
    <tr> 
    <td> 
    <table border="1"> 
     <tr> 
     <td>Object 1 
     </td> 

     <td>Object 1 Image<br /> 
     Object 1 Image<br /> 
     Object 1 Image<br /> 
     Object 1 Image<br /> 
     Object 1 Image<br /> 
     Object 1 Image<br /> 
     Object 1 Image<br /> 
     Object 1 Image<br /> 
     </td> 
     </tr> 
    </table> 
    </td> 
    <td colspan="4"> 
    <table border="1" width="100%"> 
     <tr> 
     <td>asdf</td> 
     <td>qwer</td> 
     <td>qwer</td> 
     </tr> 
     <tr> 
     <td>asdf</td> 
     <td>qwer</td> 
     <td>qwer</td> 
     </tr> 
     <tr> 
     <td>asdf</td> 
     <td>qwer</td> 
     <td>qwer</td> 
     </tr> 
     <tr> 

     <td>asdf</td> 
     <td>qwer</td> 
     <td>qwer</td> 
     </tr> 
    </table> 

    </td> 
    </tr> 
</body> 
</html>

但可能是最好的解決方法是調整你的圖像高度...

希望有幫助！

來源

2013-05-03 13:40:01

需要幫助正確使用圖像和列格式化表格

回答

相關問題