Question

在我的应用程序中，我有一个视图，其任务是显示与此项目相关的项目和价格。

以下是我的视图呈现表格结果的方式：

@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>
}

现在，它呈现“Ok”，因为视图形状符合我想要的东西，如下所示：

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

您需要看到的是第4个提供者行的高度调整大小以匹配图像和对象的比例。 “对象1”列和“图像”采用图像的高度，但高度不是在每四个提供者之间平均分配。只有第四个调整大小以填充剩余空格。

现在我知道我的html布局可能很糟糕，因为我开始使用html格式化，并且我想知道如何正确地塑造这个，以便每条线的大小均匀。

修改

我的案例很难描述，但这里有一个很好的证明我想要的和我得到的东西：

Problem example using excel

Answer 1

这可能需要你身边的一些调整，但是我会想象这样的事情：

    @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>
        }
    }

使用固定高度（以像素为单位）对行进行排序，即图像高度/行距。http://jsfiddle.net/vUKfX/2/

Answer 2

我假设这个问题的原因是因为你的Image比四个数据行组合的高度要长，并且你希望行的比例相等。

您有几种选择。您可以简单地将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>

但可能最好的解决方法是调整图像高度......

希望有所帮助！

需要帮助使用图像和列正确格式化表格

2 个答案: