本文详解如何利用 Thymeleaf 的迭代状态变量 iterStat 控制表格行结构，实现每行渲染固定数量（如 5 个）数据项，避免单列堆叠，提升表格可读性与响应式表现。
本文详解如何利用 thymeleaf 的迭代状态变量 `iterstat` 控制表格行结构，实现每行渲染固定数量（如 5 个）数据项，避免单列堆叠，提升表格可读性与响应式表现。
在 Thymeleaf 中，默认的 th:each 指令会为集合中每个元素生成一个独立的 <tr> 标签，导致所有数据垂直排列——这在展示大量商品（如 100 个产品）时既浪费空间又不直观。若需优化为「每行 5 列」的网格化表格布局，关键在于动态控制 <tr> 的启闭时机，而非简单重复 <tr>。
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 个 <td>，满 5 个后换行」，核心逻辑是：
✅ 在第 5、10、15… 个元素（即 count % 5 == 0）之后插入新 <tr>；
⚠️ 但需注意：<tr> 必须成对闭合，且不能在最后一个元素后额外添加空行。因此更稳妥的写法是——在第 4、9、14… 个元素（即 count % 5 == 4）且非末尾时，主动闭合当前 <tr> 并开启新 <tr>。
以下是推荐的完整实现：
<table border="1" style="border-collapse: collapse;">
<tr th:each="product, iterStat : ${data}">
<td>
<input type="checkbox"
name="productCode"
th:value="${product.productCode}"
th:text="${product.productName}" />
</td>
<!-- 每累计 5 个元素（即当前为第 4、9、14... 个索引）且未到末尾时，闭合当前行并新建一行 -->
<th:block th:if="${iterStat.count % 5 == 4 and !iterStat.last}">
</tr><tr>
</th:block>
</tr>
</table>? 关键说明：
- <th:block> 是 Thymeleaf 的无渲染占位符标签，仅用于逻辑控制，不会输出 HTML；
- iterStat.count % 5 == 4 对应第 5、10、15… 个元素（因 count 从 1 起计）；
- !iterStat.last 防止在最后一个 <td> 后错误插入 </tr><tr>，避免产生空行；
- 若数据总数不是 5 的倍数（如 103 条），最后不足 5 个的元素将自然保留在最后一行，无需额外处理。
? 进阶提示：
- 如需首行对齐或样式隔离，可结合 iterStat.index 添加 CSS 类，例如 th:classappend="${iterStat.index} % 5 == 0 ? 'row-start' : ''"；
- 更现代的替代方案是放弃 <table>，改用 CSS Grid 或 Flexbox 布局（如 display: grid; grid-template-columns: repeat(5, 1fr);），语义更清晰、响应式更灵活，Thymeleaf 仅负责生成 <div> 列表即可。
掌握 iterStat 不仅解决分组换行问题，更是 Thymeleaf 动态模板开发的核心能力之一——从分页、斑马纹、条件折叠到复杂嵌套渲染，皆可由此延伸。
