行内不必要的间距 table

Question

将 5 列排成一行以进行 html 电子邮件群发。我的边距和单元格间距为 0，但 5 张图像之间的间距很大，所以我无法弄清楚我遗漏了什么。我已经能够连续 2 列做到这一点，但无法弄清楚我现在做错了什么。任何帮助表示赞赏

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" colspan="5">
             <a href="#">
             <img src ="#" style= "display: block; width: 600px;">
             </a>
        </td>
    </tr>

<!--Column 1-->

 <tr>
     <td align="right" colspan="1" width="120">
         <a style = "margin: 0px;" href="#">
         <img src="#" style="display: block; width: 120px;">
         </a>
      </td>

<!-- Column 2 -->

         <td align="right" colspan="1" width="120">
         <a href="#">
         <img src="#" width="120px" style="display: block; width: 120px;">
         </a>
      </td>


<!-- Column 3 -->

         <td align="center" colspan="1" width="120">
         <a href="#">
         <img src="#" width="120px" style="display: block; width: 120px;">
         </a>
      </td>


<!-- Column 4 -->

         <td align="left" colspan="1" width="120">
         <a href="#">
         <img src="#" width="120px" style="display: block; width: 120px;">
         </a>
      </td>

<!-- Column 5 -->

         <td align="left" colspan="1" width="120">
         <a href="#">
         <img src="#" width="120px" style="display: block; width: 120px;">
         </a>
      </td>
  </tr>

Answer 1

您必须执行以下步骤：

1) 删除 table 标签中的 width="100%"

2) 将 table 的 css table 布局设置为固定。喜欢下面

<table border="0" cellspacing="0" cellpadding="0" style="table-layout: fixed;margin: 0px auto;">

Answer 2

请注意，当 table 有很多水平宽度需要填充时，您的图像之间只有 space。您需要修复 table 的宽度，使其不会变得比需要的更大。

或者，您可以放弃 5 列 table 布局并以内嵌块或浮动方式显示图像。使用内联块时，请确保标记在元素之间没有 spaces，这可以通过这样的注释来实现：

   <img ...><!--
--><img ...><!--
--><img ...>

行内不必要的间距 table

Unecessary spacing in inline table

html

css

html-table

html-email