【发布时间】：2026-02-04 15:20:09
【问题描述】：
我想要内容行旁边的渐变阴影。渐变必须相对于内容扩展。 我现在正在做的是在我的内容旁边有 9 个带有右边框的 td。这适用于 Thunderbird，但不适用于 Outlook：
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #cbcbcb;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #c9c9c9;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #c6c6c6;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #c2c2c2;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #bdbdbd;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #b6b6b6;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #afafaf;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #a7a7a7;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #9e9e9e;"></td>
我在 Thunderbird 中得到了一个很好的渐变阴影，但在 Outlook 中我得到了左边框为白线。我也试图让 td 像这样：
<td style="width: 1; bgcolor: #cbcbcb"></td>
这在 Outlook 中有效，但 Thunderbird 似乎根本不会渲染没有内容的 td。
最后我尝试制作这样的左右边框：
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #cbcbcb; left-border: #c9c9c9;"></td>
这在 Thunderbird 中有效，但在 Outlook 中无效。
你能帮帮我吗？
【问题讨论】：
-
你有截图和/或代码的 jsfiddle 吗？
-
@samanthasquared 这是它在 Outlook 中的外观：bildr.no/image/1296566.jpeg 当我使用边框时。为什么要查看我的代码的屏幕截图？我已将其粘贴在问题中。
-
听起来你解决了你的问题，但是将你的代码发布到jsfiddle.net 或类似的东西是非常有帮助的。您只发布了 9 个表格单元格，我不知道您是否有格式错误的表格或您的代码可能发生的任何其他问题。
标签： html-table html-email gradient