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

Posted 2023-02-24

【中文标题】(Django) HTML：表格列垂直显示

【英文标题】：(Django) HTML: Table columns are displaying vertically

【发布时间】：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>

应该是这样的：

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

你能帮帮我吗？

提前致谢！

【参考方案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>

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