如何用Thymeleaf实现Outlook邮件HTML中集合对象的横向排列

问题描述 #

我在用Thymeleaf给Outlook邮件制作HTML页面，把用户集合渲染到表格里，但现在用户是垂直排列的，代码如下：

<table width="50%" cellpadding="0" cellspacing="0">
    <tr th:each="user:${users}">
        <td style="padding: 16px 24px 16px 24px;">
            <img src="cid:avatar"
                 alt="IMAGE">
        </td>
        <td style="padding: 16px 24px 16px 1px;">
            <span class="contact-name"
                  th:text="${user.fullName}">
                name
            </span>
            <span th:href="${link}"
                  class="contact-email"
                  th:text="${user.email}">
                email
            </span>
            <br/>
            <span class="contact-number"
                  th:text="${user.phoneNumber}">
                8900000000
            </span>
        </td>
    </tr>
</table>

我需要实现固定列数，用户依次横向排列的效果（比如每行显示2个用户，填满后自动换行），而且必须兼容Outlook有限的HTML标签支持。

解决方案 #

Outlook对flex、grid这类现代布局支持极差，只能用嵌套表格结合Thymeleaf的集合分组功能来实现：

实现代码 #

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <!-- 外层循环：遍历分组后的用户组，每组对应一行 -->
    <tr th:each="userGroup : ${#lists.partition(users, 2)}">
        <!-- 内层循环：遍历当前组的用户，每个用户占一个单元格 -->
        <td th:each="user : ${userGroup}" valign="top" style="padding: 16px 24px;">
            <!-- 单个用户的信息容器，用小表格保证布局稳定 -->
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="padding-right: 8px;">
                        <img src="cid:avatar" alt="用户头像">
                    </td>
                    <td>
                        <span class="contact-name" th:text="${user.fullName}">name</span><br>
                        <a class="contact-email" th:href="${link}" th:text="${user.email}">email</a><br>
                        <span class="contact-number" th:text="${user.phoneNumber}">8900000000</span>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

关键细节说明 #

• 集合分组：用#lists.partition(users, 2)把用户列表拆成每组2个的子列表，修改数字2就能调整每行显示的用户数量（比如改成3就是每行3列）。
• 嵌套表格：每个用户放在外层表格的一个单元格里，单元格内部用小表格装头像和信息，这是Outlook最能稳定解析的布局方式。
• 对齐处理：给外层单元格加valign="top"，保证同一行的用户信息都是顶部对齐，避免高低不齐。
• 链接修复：原代码里用span加th:href是无效的，必须改成<a>标签才能让邮箱链接可点击，Outlook只认标准的链接标签。

Outlook兼容提示 #

• 所有样式尽量用内联style属性，Outlook不支持外部样式表或<style>标签里的大部分样式。
• 别用浮动、定位这类CSS布局，完全依赖表格的行和单元格来控制排列。
• 图片最好指定宽高属性，防止Outlook自动缩放导致布局混乱。

内容的提问来源于stack exchange，提问作者Семен Немытов