Question

我创建了一个表，并用数据库中的信息填充它。它目前只是在网页上将每一行列在另一行之上。我想让它在下降之前传播到整个页面，但我无法弄清楚如何做到这一点。

我的数据库表：

+---------------+--------------+--------------+-------------+
| Company       | Name         | Price        | Inventory   |
+---------------+--------------+--------------+-------------+
| Row1 Company  | Row1 Name    | Row1 Price   | Row1 Inven. |
+---------------+--------------+--------------+-------------+
| Row2 Company  | Row2 Name    | Row2 Price   | Row2 Inven. |
+---------------+--------------+--------------+-------------+
| Row3 Company  | Row3 Name    | Row3 Price   | Row3 Inven. |
+---------------+--------------+--------------+-------------+

在网页上显示如下：

+---------------+
| Row1 Company  |
+---------------+
| Row1 Name     |
+---------------+
| Row1 Price    |
+---------------+
| Row1 Inven.   |
+---------------+
| Row2 Company  |
+---------------+
| Row2 Name     |
+---------------+
| Row2 Price    |
+---------------+
| Row2 Inven.   |
+---------------+
| Row3 Company  |
+---------------+
| Row3 Name     |
+---------------+
| Row3 Price    |
+---------------+
| Row3 Inven.   |
+---------------+

这就是我希望它在网页上展示的方式。下降到下一行＆＃34;线＆＃34;一旦达到一定的宽度：

+---------------+--------------+--------------+
| Row1 Company  | Row2 Company | Row3 Company |
+---------------+--------------+--------------+
| Row1 Name     | Row2 Name    | Row3 Name    |
+---------------+--------------+--------------+
| Row1 Price    | Row2 Price   | Row3 Price   |
+---------------+--------------+--------------+
| Row1 Inven.   | Row2 Inven.  | Row3 Inven.  |
+---------------+--------------+--------------+

我确定有一种简单的方法可以做到这一点，但我能想到的唯一想法是为每一行数据创建一个html表，然后使用基于该行的查询填充表＃ 39; s ID。我遇到的问题是html文件可能会对所有正在创建的表格造成混乱。（我的数据库表中有20行，所以如果可以避免的话，我真的不必创建20个单独的html表）

这是我目前的cshtml文件：

@using PracticeApp.AppCode
@using PracticeApp.AppCode.Entities
@using PracticeApp.Controllers
@model PracticeApp.AppCode.Entities.RetiredDatas

@{
    ViewBag.Title = "Retired Equipment";
}

<hgroup class="title">
    <h1>@ViewBag.Title</h1>
</hgroup>

<div class="products">
    <table>
        @{
            Model.RetiredDataList = Model.RetiredDataList.OrderBy(x => x.Company).ToList();
            foreach(RetiredData row in Model.RetiredDataList)
            {
                <tr>
                    <td><b>Company: </b></td>
                    <td>@row.Company</td>
                </tr> 
                <tr>
                    <td><b>Name: </b></td>
                    <td>@row.Name</td>
                </tr>
                <tr>
                    <td><b>Price ($): </b></td>
                    <td>@row.SalePrice</td>
                </tr>
                <tr>
                    <td><b>Inventory: </b></td>
                    <td>@row.IsSold</td>
                </tr>
            }
        }
    </table>
</div>

Answer 1

保持foreach像这样（填充数据）

foreach(RetiredData row in Model.RetiredDataList)
        {
            <tr>
                <td>@row.Company</td>                  
                <td>@row.Name</td>
                <td>@row.SalePrice</td>
                <td>@row.IsSold</td>
            </tr>
        }

  and before foreach do this(to create the header)
          <tr>
                <th><b>Company: </b></th>
                <th><b>Name: </b></th>
                <th><b>Price ($): </b></th>
                <th><b>Inventory: </b></th>
            </tr>

Answer 2

将表创建放在循环中，然后您可以浮动表以将它们并排放置。它会给你你所描述的效果。

这样的事情：

@{
    Model.RetiredDataList = Model.RetiredDataList.OrderBy(x => x.Company).ToList();
    foreach(RetiredData row in Model.RetiredDataList)
    {
        <table style='float:left;'>
            <tr>
                <td><b>Company: </b></td>
                <td>@row.Company</td>
            </tr> 
            <tr>
                <td><b>Name: </b></td>
                <td>@row.Name</td>
            </tr>
            <tr>
                <td><b>Price ($): </b></td>
                <td>@row.SalePrice</td>
            </tr>
            <tr>
                <td><b>Inventory: </b></td>
                <td>@row.IsSold</td>
            </tr>
        </table>
    }
}

格式化从数据库填充的表

2 个答案: