关于html表格的问题

Question

我有一个关于 html 中的表格的问题。我已经头疼了三天试图解决这个问题，问了几个问题，但一直没有解决。我非常感谢你的帮助。 我想使用 table 标签和 th:each 来显示列表。列表中使用的是一回事（即 db 中表中的字段是一回事），我想在两列中一路列出该表。但是，如果使用 table 标签，则一行中只能看到一个字段。换句话说，我每行显示两个字段的目标并不适用。 我怎么解决这个问题？ （图片：我想要的设计）

我写的代码如下：

<table th:each="Vocalist: ${bookLis}">
                <td>
                    <div class="bookdiv" id="startButton">
                        <img src="images/ClosedBook.png" class="closeBook">
                        <span class="bookName" th:text="${Vocalist.vocaName}">title</span>
                    </div>
                </td>
        </table>

我也用过css的grid但是没效果。

Answer 1

尝试使用此更新后的代码与

<tr>

标签来处理表中的行：

<table>
    <tr th:each="vocalist, iterStat : ${bookList}" th:if="${iterStat.index % 2 == 0}">
        <td>
            <div class="bookdiv" id="startButton">
                <img src="images/ClosedBook.png" class="closeBook">
                <span class="bookName" th:text="${vocalist.vocaName}">title</span>
            </div>
        </td>
        <td th:if="${iterStat.index + 1 &lt; bookList.size()}">
            <div class="bookdiv" id="startButton">
                <img src="images/ClosedBook.png" class="closeBook">
                <span class="bookName" th:text="${bookList[iterStat.index + 1].vocaName}">title</span>
            </div>
        </td>
    </tr>
</table>