如何不使用flexbox为table实现flex-wrap自动换行效果（适配邮件模板）

实现方案 #

原生<tr>标签本身是整行块级结构，无法拆分换行，我们可以通过调整<td>的展示属性，利用行内元素自动换行的特性实现需求，该方案兼容绝大多数邮件客户端，无需依赖flex/grid布局：

调整后的样式代码

table {
  width: 100%;
  border-collapse: collapse;
}
/* 将td设置为行内块，超出容器宽度自动换行 */
table td {
  display: inline-block;
  background: white;
  padding: 5px;
  /* 老旧客户端降级可加 float: left; */
}
.item {
  background: yellow;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  /* 用行高实现垂直居中，兼容性优于display: table-cell */
  line-height: 60px;
}

调整后的HTML结构

<table>
    <tr>
        <td><div class="item">0</div></td>
        <td><div class="item">1</div></td>
        <td><div class="item">2</div></td>
        <td><div class="item">3</div></td>
        <td><div class="item">4</div></td>
        <td><div class="item">5</div></td>
        <td><div class="item">6</div></td>
        <td><div class="item">7</div></td>
        <td><div class="item">8</div></td>
        <td><div class="item">9</div></td>
        <td><div class="item">10</div></td>
    </tr>
</table>

兼容优化建议

• 所有样式建议写为元素内联样式，避免部分邮件客户端过滤头部样式表
• 若需要固定每行展示数量，可给<td>设置对应百分比宽度，比如每行展示5项则设置width: 20%即可
• 针对Outlook等极端老旧客户端，可给<td>额外添加float: left作为降级方案，同时可在table末尾加空的清除浮动元素避免布局错位

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