html - 从数据库中填充的格式化表

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.   |
+---------------+

这就是我希望它在网页上的呈现方式。达到一定宽度后下降到下一个“行”:

+---------------+--------------+--------------+
| 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 表，然后使用基于该行 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

将表格创建放在循环中，然后您可以 float 表格以将它们并排放置。它会给你带来你想要的效果。

像这样:

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