如何在Thymeleaf里实现每行显示5个元素的表格循环布局

本文详解如何利用 Thymeleaf 迭代状态变量 iterStat 控制表格行结构，实现每行显示 5 个数据项，避免单列堆叠，提升可读性。

本文将细致说明，借助 Thymeleaf 的迭代状态变量 iterStat，怎样操控表格行结构，达成每行固定呈现 5 项数据，从而规避单列堆叠，提高表格的易读性与响应能力。

Thymeleaf 的默认 th:each 指令，会为集合内每个元素单独生成一个

标签，致使所有数据垂直排列——当展现大量商品（例如 100 个产品）时，既占用空间又不直观。

若要优化成“每行 5 列”的网格化表格布局，核心在于动态控制 的开启与闭合时机，而非单纯重复 。

Thymeleaf 内建了迭代状态对象 iterStat（全称 iterationStatus），它自动随 th:each 绑定，具备以下常用属性：

iterStat.index：从 0 开始的索引（0, 1, 2…） iterStat.count：从 1 开始的计数（1, 2, 3…） iterStat.size：集合总长度 iterStat.odd / iterStat.even：奇偶判断 iterStat.first / iterStat.last：首尾标识

要实现“每行 5 个

，满 5 个后换行”，核心逻辑是：✅ 在第 5、10、15… 个元素（即 count % 5 == 0）之后插入新 ；⚠️ 但需注意： 必须成对闭合，且不能在最后一个元素后额外添加空行。因此更稳妥的写法是——在第 4、9、14… 个元素（即 count % 5 == 4）且非末尾时，主动闭合当前 并开启新 。

下面提供一种推荐的完整实现：

? 核心要点：

属于 Thymeleaf 的不渲染占位符标签，仅仅用来逻辑控制，不会生成 HTML； iterStat.count % 5 == 4 对应第 5、10、15… 个元素（因 count 从 1 起计）； !iterStat.last 防止在最后一个 后错误插入 ，避免产生空行； 若数据总数不是 5 的倍数（如 103 条），最后不足 5 个的元素将自然保留在最后一行，无需额外处理。

? 进阶提示：

如需首行对齐或样式隔离，可结合 iterStat.index 添加 CSS 类，例如 th:classappend="${iterStat.index} % 5 == 0 ? 'row-start' : ''"； 更现代的替代方案是放弃 ，改用 CSS Grid 或 Flexbox 布局（如 display: grid; grid-template-columns: repeat(5, 1fr);），语义更清晰、响应式更灵活，Thymeleaf 仅负责生成