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

【问题标题】：Need help formatting a table properly with images and columns需要帮助使用图像和列正确格式化表格
【发布时间】：2017-06-28 06:49:15
【问题描述】：

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

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

@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

现在这是 WANTED 结果。 “对象名称”列是单列，就像在 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”列和“图像”取图像的高度，但高度在每四个提供者之间不均分。只有第 4 次调整大小以填充剩余空间。

现在我知道我的 html 布局可能很糟糕，因为我是从 html 格式开始的，我想知道如何正确地调整它的形状，以使每行的大小均匀。

编辑

我的情况很难描述，但这里有一个我想要什么和我得到什么的 excel 演示：

【问题讨论】：

也许你的数据库中有一些空白数据，所以它实际上看起来是正确的，它只是插入了 2 个额外的不包含数据的行。调试，在你建模绑定之前，看看集合实际包含什么。您也不需要指定表格中每个单元格的高度。
好的，我去看看，告诉你我发现了什么。
如果你看看你是如何渲染你的 html 的，你就是在中渲染。将最后一个向上移动，就在 @for (int j 行的上方
哦@MajorByte 是对的，我没有注意到这一点。那很可能是你的问题
是的，我是这么认为的……但到目前为止，这是最接近我实际想要渲染的内容。这就是为什么我在中使用

标签： html asp.net-mvc html-table

【解决方案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/

【讨论】：

是的，固定高度，150 px 高。
和固定的行数？
嗯，你看到了上面的结构。唯一会改变的是 Model.Count；根据结果，它可能是 1 个或 245 个项目，甚至更多。
@HerveS 我已经用代码更新了答案，这些代码或多或少会做你想做的事......
你知道吗？我不得不删除 else 部分，因为它让一切都错了。但除此之外，它完全有效。好的！非常感谢！

【解决方案2】：

我假设出现此问题的原因是因为您的 Image 比四个数据行组合的高度长，并且您希望行等比例缩放。

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

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

希望有帮助！

【讨论】：