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

时间：2026-06-03 14:00:02 编辑：袖梨来源：一聚教程网

本文详解如何利用 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 仅负责生成
列表即可。
掌握 iterStat 的使用技巧，不仅能够解决分组换行问题，更是深入 Thymeleaf 动态模板开发的关键——从分页到复杂嵌套，均可由此延伸。

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程