(Django) HTML：表格列垂直显示答案

【问题标题】：(Django) HTML: Table columns are displaying vertically(Django) HTML：表格列垂直显示
【发布时间】：2022-01-22 20:37:16
【问题描述】：

我目前正在尝试在模板中显示一堆模型的信息。

因此，我一直在创建一个表格来水平显示数据库中每个“以前的游戏”的所有信息：

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

应该是这样的：

但目前所有表格列都垂直显示在下方，而不是水平显示在每个之前的游戏旁边，我不知道为什么。

你能帮帮我吗？

提前致谢！

【问题讨论】：

标签： html django html-table

【解决方案1】：

我会将我的所有标题放在第一行，然后开始循环浏览我的游戏，每个游戏有一行，每个游戏属性的单元格 (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>

【讨论】：

感谢您的回答！在这种情况下，我会得到一个表格，其中所有表格数据水平相邻，每个“以前的游戏”都在彼此下方。这是一种方式，但我想让以前的游戏水平相邻，所有表格数据垂直在下面。 :')
您能否提供一个说明您所追求的内容的说明，或许可以模拟一个电子表格图像。我无法想象你要做什么。
当然！请稍等，我编辑问题
我添加了它:)！目前所有内容都在所有内容下方的一列中。但它实际上应该看起来像上面的这张图片。每个“以前的游戏”只有一列，标题和所有表格数据在彼此下方的一行，但游戏彼此相邻
我不认为你可以做你希望的事情。您想循环浏览您以前的电影以创建列，但我的理解是表格是按行创建的。您可以更改传递给模板的数据结构，例如，每个行元素都可以访问固定数量的先前游戏，因此您可以定位 prev_game_1.name 或 prev_game_1.date

【解决方案2】：

好的，我有一个解决方案：

由于我为“以前的游戏”-对象的每个信息都创建了一个行，因此在每个循环中，我需要将循环放在行内，因为只能创建一次行。

现在看起来像这样：

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

感觉不是最干净的解决方案，但它对我有用！

【讨论】：