(Django) HTML: Колонки таблицы отображаются вертикально

В настоящее время я пытаюсь отобразить кучу информации о модели внутри шаблона.

Поэтому я создавал таблицу, чтобы показать всю информацию горизонтально для каждой "предыдущей игры" в базе данных:

<table style="height: 100%">
     {% for previous_game in previous_games %}
            <tr>
                <th> {{ previous_game.name }}</th>
            </tr>
            <tr>
                <td> <img id="Videogame_Picture" src="{{ previous_game.image.url }}"> </td>
            </tr>
            <tr>
                <td> {{ previous_game.date }} </td>
            </tr>
            <tr>
                <td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.min_req %} "></td>
            </tr>
            <tr>
                <td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.rec_req %} " ></td>
            </tr>
            <tr>
                <td> PC Rig {{ previous_game.config }}</td>
            </tr>
       {% endfor %}
 </table>

Но в настоящее время все столбцы таблицы отображаются вертикально внизу, а не горизонтально рядом с каждой предыдущей игрой, и я не могу понять, почему.

Можешь мне помочь?

Заранее спасибо!

Я бы разместил все заголовки в первой строке, а затем начал бы циклический просмотр игр с одной строкой на игру и ячейками (td) для каждого атрибута игры:

<table style="height: 100%">
    <tr>
        <th> previous game name </th>
        <th> image </th>
        <th> previous game date </th>
        <th> previous game result 1 </th>
        <th> previous game result 2 </th>
        <th> PC Rig </th>
    </tr>
    {% for previous_game in previous_games %}
    <tr>
        <td> {{ previous_game.name }} </td>
        <td> <img id="Videogame_Picture" src="{{ previous_game.image.url }}"> </td>
        <td> {{ previous_game.date }} </td>
        <td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.min_req %} "> </td>
        <td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.rec_req %} " ></td>
        <td>{{ previous_game.config }}</td>
    </tr>
    {% endfor %}
</table>

Хорошо, у меня есть решение:

Поскольку я создал Строку для каждой информации "предыдущей игры" - Объекта, в каждом цикле, мне нужно было поместить цикл внутрь Строки, чтобы иметь возможность создать Строку только один раз.

Теперь это выглядит следующим образом:

<table style="height: 150px; border: 1px solid black; width: 600px">

                <tr>
                    {% for previous_game in previous_games %}
                         <th> {{ previous_game.name }}</th>
                    {% endfor %}
                </tr>
                <tr>
                    {% for previous_game in previous_games %}
                        <td> <img id="Videogame_Picture" src="{{ previous_game.image.url }}"> </td>
                    {% endfor %}
                </tr>
                <tr>
                    {% for previous_game in previous_games %}
                        <td> {{ previous_game.date }} </td>
                    {% endfor %}
                </tr>
                <tr>
                    {% for previous_game in previous_games %}
                        <td style="display: inline"> {% load static %} <img id= "Result_Icon" src="{% static previous_game.min_req %} "></td>
                        <td style="display: inline"> {% load static %} <img id= "Result_Icon" src="{% static previous_game.rec_req %} " ></td>
                    {% endfor %}
                </tr>
                <tr>
                    {% for previous_game in previous_games %}
                        <td> PC Rig {{ previous_game.config }}</td>
                    {% endfor %}
                </tr>
        </table>

Это не кажется самым чистым решением, но для меня это сработало!

Вернуться на верх