邮件兼容的带点分隔收据视图HTML表格实现方案咨询

表格是邮件开发的标准兼容方案，完全能满足你「左/右列由内容决定宽度、中间列填充点分隔」的需求，你的思路没问题，但现有代码还没达到预期效果，得做些调整：

现有代码的问题 #

1. 用了w-1/4、w-1/6这类固定宽度类，会强制左右列占比，没法让内容自动适配宽度
2. 中间列的边框虚线是垂直方向的，没法实现横向填充的点分隔效果

改进后的兼容代码 #

直接用内联样式（邮件客户端几乎不支持外部CSS和Tailwind类），实现自适应宽度+点分隔：

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border: 1px solid #4299e1;">
  <tbody>
    <tr style="border: 1px solid #334155;">
      <!-- 左列：内容自动适配宽度 -->
      <td align="left" style="padding: 24px 10px 24px 0;">
        <span style="color: #000; font-size: 14px;">Repayment Amount</span>
      </td>
      <!-- 中间列：占据剩余宽度，用底部虚线实现点分隔 -->
      <td style="padding-top: 24px; border-bottom: 2px dotted #e5e7eb; width: 100%;"></td>
      <!-- 右列：内容自动适配宽度 -->
      <td align="right" style="padding: 24px 0 24px 10px;">
        <span style="color: #000; font-size: 14px;">$775.13</span>
      </td>
    </tr>
    <!-- 新增一行示例，验证自适应效果 -->
    <tr style="border: 1px solid #334155;">
      <td align="left" style="padding: 24px 10px 24px 0;">
        <span style="color: #000; font-size: 14px;">Late Payment Fee</span>
      </td>
      <td style="padding-top: 24px; border-bottom: 2px dotted #e5e7eb; width: 100%;"></td>
      <td align="right" style="padding: 24px 0 24px 10px;">
        <span style="color: #000; font-size: 14px;">$25.00</span>
      </td>
    </tr>
  </tbody>
</table>

核心逻辑说明 #

• 去掉固定宽度，左/右列会根据内容自动收缩到最小宽度
• 中间列设置width: 100%，强制占据表格剩余的所有空间
• 用border-bottom: 2px dotted #e5e7eb实现横向点分隔，这是所有邮件客户端都支持的写法
• 给左右列加水平内边距，避免内容和点分隔线过于拥挤

如果需要点分隔线垂直居中（不是底部），可以把中间列的边框改成border-top，同时调整上下内边距，或者用vertical-align: middle对齐所有单元格。

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