HTML 表格每行显示两个数据项的正确实现方法

本文详解如何在 Thymeleaf 模板中结合 HTML <table> 标签，优雅地将单列表数据（如数据库查询结果）按“每行两列”布局渲染，避免常见误区（如错误嵌套 th:each 在 <table> 上），并提供可直接运行的健壮代码方案。

本文详解如何在 thymeleaf 模板中结合 html `

在使用 HTML 表格（<table>）配合 Thymeleaf 的 th:each 渲染动态列表时，一个典型误区是将 th:each 直接写在 <table> 标签上——这会导致为每个数据项重复生成整个表格结构，而非在单个表格内合理组织行与单元格。您当前的目标是：将 bookList 中的 vocalist 数据，以每行显示两个 <td>（即左右并排两个书籍卡片）的方式呈现，这本质上是对线性列表进行“二维分组”（每组 2 项 → 1 行）。

正确的实现思路是：
✅ 将 th:each 应用于 <tr>（表格行）标签；
✅ 利用 Thymeleaf 的迭代状态（iterStat）判断是否为偶数索引（即新行起点）；
✅ 在该行内手动渲染当前项（bookList[i]）和下一项（bookList[i+1]），并添加边界检查防止越界。

以下是推荐的完整、安全、可维护的代码：

<table class="vocalist-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" alt="Book cover" />        <span class="bookName" th:text="${vocalist.vocaName}">Vocalist Name</span>      </div>    </td>    <!-- 右侧单元格：下一项（仅当存在时） -->    <td th:if="${iterStat.index + 1 < bookList.size()}">      <div class="bookdiv" id="startButton">        <img src="images/ClosedBook.png" class="closeBook" alt="Book cover" />        <span class="bookName" th:text="${bookList[iterStat.index + 1].vocaName}">Next Vocalist</span>      </div>    </td>  </tr></table>

⚠️ 关键注意事项：

• id="startButton" 在循环中重复出现会违反 HTML ID 唯一性规范，建议改为 class="startButton" 或动态生成唯一 ID（如 th:id="${'button-' + iterStat.index}"）；
• 若需响应式适配（如移动端单列），建议优先考虑 CSS Grid 或 Flexbox 替代表格布局（语义更清晰、维护性更高），例如：

  .book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }@media (max-width: 768px) { .book-grid { grid-template-columns: 1fr; } }

• Thymeleaf 表达式中特殊字符需转义：< 写作

此方案兼顾语义正确性、浏览器兼容性与 Thymeleaf 最佳实践，可稳定支持奇数长度列表（末行自动只渲染单个 <td>），是传统表格场景下的可靠解法。

立即学习“前端免费学习笔记（深入）”；