如何用HTML table标签结合th:each实现每行两列展示列表？

你之前的写法错误在于把th:each绑定在了<table>标签上，这会让每个Vocalist对象都生成一个独立的表格，自然每行只能显示一个字段。要实现每行两个元素的布局，需要调整循环的位置，并借助Thymeleaf的迭代状态来控制行的生成。

方法1：基于Table的实现（符合你的需求） #

通过Thymeleaf的迭代状态变量（如status）判断索引，每两个元素生成一行：

<table>
    <!-- 遍历列表时同时获取迭代状态 -->
    <tr th:each="vocalist, status : ${bookLis}" th:if="${status.index % 2 == 0}">
        <!-- 显示当前索引的元素 -->
        <td>
            <div class="bookdiv">
                <img src="images/ClosedBook.png" class="closeBook">
                <span class="bookName" th:text="${vocalist.vocaName}">title</span>
            </div>
        </td>
        <!-- 判断是否存在下一个元素，存在则显示 -->
        <td th:if="${status.index + 1 < bookLis.size()}">
            <div class="bookdiv">
                <img src="images/ClosedBook.png" class="closeBook">
                <span class="bookName" th:text="${bookLis[status.index + 1].vocaName}">title</span>
            </div>
        </td>
    </tr>
</table>

关键说明： #

• 把th:each移到<tr>标签上，同时添加status变量获取迭代的索引、奇偶性等状态。
• 仅当索引为偶数（status.index % 2 == 0）时生成新行，确保每行包含两个元素。
• 第二个<td>通过status.index + 1获取下一个元素，同时判断索引是否越界，避免数组越界错误。

方法2：CSS Grid布局（更简洁，无需Table） #

如果可以放弃Table结构，用Grid布局会更简单，之前没生效大概率是因为你把每个元素放在了独立的Table中，Grid无法识别为同一容器的子元素。代码如下：

<!-- 外层Grid容器 -->
<div class="book-grid">
    <!-- 直接遍历每个元素生成卡片 -->
    <div class="bookdiv" th:each="vocalist : ${bookLis}">
        <img src="images/ClosedBook.png" class="closeBook">
        <span class="bookName" th:text="${vocalist.vocaName}">title</span>
    </div>
</div>

对应的CSS：

.book-grid {
    display: grid;
    /* 每行显示2列，宽度均分 */
    grid-template-columns: repeat(2, 1fr);
    /* 可选：设置卡片之间的间距 */
    gap: 15px;
}

内容的提问来源于stack exchange，提问作者marinewu