如何在base.html中实现可复用的邮件模板条纹表格样式？

云上老周

2026-8-20

解决邮件中条纹表格样式不生效的问题

你的问题核心在于邮件客户端对CSS3伪类选择器的支持极差——浏览器能正常识别nth-child，但像Outlook、Gmail这类主流邮件客户端几乎不支持这类高级选择器，这才导致样式在邮件里失效，和模板里的for循环无关。

以下是两种无需在home.html中编写样式，仅通过base.html配合模板逻辑实现条纹表格的方案：

方案一：循环时给奇数行添加类（推荐）

在home.html的for循环里，利用模板引擎的循环索引（比如Jinja2的loop.index）给奇数行添加自定义类，然后在base.html中针对这个类写样式：

修改home.html的循环部分：

{% for row in data[1] %}
<tr {% if loop.index % 2 == 1 %}class="odd-row"{% endif %}>
    <td>{{row[1]}}</td>
    <td>{{row[2]}}</td>
    <td>{{row[3]}}</td>
</tr>
{%endfor%}

修改base.html的样式部分：

table tr td{
    color:black;
    background: white;
    border: 1px;
}
th{
    color:black;
    background: white;
}
/* 替换原来的nth-child选择器 */
table tr.odd-row td{
    background: orange;
}
table.collapsed{
    border-collapse: collapse;
    border:1px solid black;
}

这种方式利用基础类选择器，所有邮件客户端都能识别，完全符合你“不在home.html写样式，复用base.html”的需求。