Почему моя HTML-таблица не соответствует указанному макету?

Question

Я работаю с Node.js и создал страницу календаря, которая должна отображать 3 варианта еды на каждый день в файле .ejs.Календарная неделя длится всего 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

Вам необходимо добавлять тег <tr></tr> в блоке forEach через каждые 5 дней.

РЕДАКТИРОВАТЬ

Предполагая, что 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>