Thymeleaf表格单单元格展示多列表项出现多余单元格问题求助

问题根因 #

你遇到的单元格错位/多余问题来源于三个核心错误：

1. 最初将th:each写在<td>标签上时，遍历逻辑会为每一个handler条目生成独立的<td>，直接导致列数溢出
2. 调整后遍历逻辑本身没问题，但你在<tr>内用<div>包裹<td>属于非法HTML结构：浏览器会自动把<div>移到表格外，其上面的th:if条件完全失效，导致对应<td>无论条件是否成立都会渲染
3. 表头固定为7列，但你同一列的不同展示逻辑分散为多个带th:if的<td>，条件不成立时对应列直接缺失，整体列数不匹配触发表格自动补全错位

修复方案 #

1. 多条目单单元格展示优化 #

将同一列的所有逻辑都放在同一个<td>内部，遍历生成的行内元素放到<td>里，不会新增单元格。可以额外加遍历状态变量给多名称加分隔符，避免挤在一起：

<!-- 处理人姓名列：所有逻辑放在同一个td内 -->
<td>
    <!-- 有处理人时遍历展示所有姓名，用顿号分隔 -->
    <th:block th:if="${place.getHandledare != null and !place.getHandledare.isEmpty()}">
        <span th:each="handledare, iter : ${place.getHandledare}" 
              th:text="${handledare.name + (iter.last ? '' : '、')}"></span>
    </th:block>
    <!-- 无处理人时展示叉号 -->
    <p class="icon has-text-danger" th:if="${place.getHandledare == null or place.getHandledare.isEmpty()}">
        <i class="fa fa-lg fa-times"></i>
    </p>
</td>

2. 统一所有列的结构 #

确保每一行<tr>内刚好有7个<td>，和表头列数一一对应，不要给<td>加th:if控制整列是否生成，所有条件判断放到<td>内部：

修正后的学生手机号列示例

<td>
    <span th:if="${place.student.studentData.phoneNumber != ''}" th:text="${place.student.studentData.phoneNumber}"></span>
    <p class="icon has-text-danger" th:if="${place.student.studentData.phoneNumber == ''}">
        <i class="fa fa-lg fa-times"></i>
    </p>
</td>

修正后的处理人邮箱列示例

<td>
    <span th:if="${place.getHandledare != null and !place.getHandledare.isEmpty()}" th:text="${place.getHandledare[0].email}"></span>
    <p class="icon has-text-danger" th:if="${place.getHandledare == null or place.getHandledare.isEmpty()}">
        <i class="fa fa-lg fa-times"></i>
    </p>
</td>

修正后的处理人手机号列示例

<td>
    <th:block th:if="${place.getHandledare != null and !place.getHandledare.isEmpty()}">
        <span th:if="${place.getHandledare[0].phoneNumber != ''}" th:text="${place.getHandledare[0].phoneNumber}"></span>
        <p class="icon has-text-danger" th:if="${place.getHandledare[0].phoneNumber == ''}">
            <i class="fa fa-lg fa-times"></i>
        </p>
    </th:block>
    <p class="icon has-text-danger" th:if="${place.getHandledare == null or place.getHandledare.isEmpty()}">
        <i class="fa fa-lg fa-times"></i>
    </p>
</td>

3. 清理非法结构 #

删掉所有<tr>标签内部用于包裹<td>的<div>标签，<tr>的直接子元素只能是<td>/<th>。

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