为什么我的 HTML 表格不遵守指定的布局？

Question

我正在使用 Node.js，并创建了一个日历页面，该页面应在 .ejs 文件中显示每天的 3 个膳食选项。日历周只有 5 天。我正在从我的 psql 数据库和名为 day 的节点模型中填充膳食选项。我已将表格指定为 5 列，但第 6 天出现在第 5 天旁边，而不是在下面的行中。

这是我目前正在使用的代码：

<div class="calendarMonth">
    <table id="month" style="width:100%">
        <colgroup>
            <col span="5">
        </colgroup>

        <th colspan="5">October 2018</th>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>

        <tr>
            <% days.forEach((day) => { %>
            <td>
                <%= day.id %><br>
                <%= day.mealOne %><br>
                <%= day.mealTwo %><br>
                <%= day.mealThree %><br>
            </td>
            <% }) %>
        </tr>
    </table>
</div>

Answer 1

您需要每 5 天在您的 forEach 块中添加一个 <tr></tr> 标记。

编辑

假设day.id 给你星期几，你可以像这样修改你的代码：

<div class="calendarMonth">
    <table id="month" style="width:100%">
        <colgroup>
            <col span="5">
        </colgroup>

        <th colspan="5">October 2018</th>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>

        <% days.forEach((day) => { %>

        <% if(day.id == "Monday") { %>
        <tr>
        <% } %>

            <td>
                <%= day.id %><br>
                <%= day.mealOne %><br>
                <%= day.mealTwo %><br>
                <%= day.mealThree %><br>
            </td>

        <% if(day.id == "Monday") { %>
        </tr>
        <% } %>

        <% }) %>
    </table>
</div>