如何让邮件中的水平表格在移动端始终保持横向显示？

要让邮件里的社交图标表格在移动端保持横向布局，需针对邮件客户端的CSS特性做以下修改：

• 给表格外层添加带横向滚动的容器，确保空间不足时可横向滑动，同时强制内容不换行
• 给表格设置固定布局，防止单元格被挤压换行

修改后的完整代码如下：

<p><span style="color: #555555;"><strong>Folge uns auch auf:</strong></span></p>
<div style="overflow-x: auto; white-space: nowrap;">
  <table class="_ac_social_table" cellspacing="0" cellpadding="0" align="left" style="table-layout: fixed; border-collapse: collapse;">
    <tbody>
      <tr>
        <td align="center" valign="middle" width="20">
          <div class="__ac_social_icons">
            <a id="facebook" class="__ac_social_icon_link" title="Facebook" href="https://www.facebook.com/">
              <img src="https://herzkanal.img-us6.com/_social_/flat-color-round-facebook.png" alt="Facebook" width="20" border="0" />
            </a>
          </div>
        </td>
        <td width="5">&nbsp;</td>
        <td align="center" valign="middle" width="20">
          <div class="__ac_social_icons">
            <a id="youtube" class="__ac_social_icon_link" title="YouTube" href="https://www.youtube.com/">
              <img src="https://herzkanal.img-us6.com/_social_/flat-color-round-youtube.png" alt="Youtube" width="20" border="0" />
            </a>
          </div>
        </td>
        <td width="5">&nbsp;</td>
        <td align="center" valign="middle" width="20">
          <div class="__ac_social_icons">
            <a id="instagram" class="__ac_social_icon_link" title="ABC" href="https://www.instagram.com/">
              <img src="https://herzkanal.img-us6.com/_social_/flat-color-round-instagram.png" alt="Instagram" width="20" border="0" />
            </a>
          </div>
        </td>
        <td width="5">&nbsp;</td>
        <td align="center" valign="middle" width="20">
          <div class="__ac_social_icons">
            <a id="wordpress" class="__ac_social_icon_link" title="Instagram Armin" href="https://www.instagram.com/">
              <img src="https://herzkanal.img-us3.com/_social_/flat-color-round-instagram.png" alt="Wordpress" width="20" border="0" />
            </a>
          </div>
        </td>
        <td width="5">&nbsp;</td>
        <td align="center" valign="middle" width="20">
          <div class="__ac_social_icons">
            <a id="website" class="__ac_social_icon_link" title="Webseite" href="https://www.wikipedia.com/">
              <img src="https://herzkanal.img-us6.com/_social_/flat-color-round-website.png" alt="Website" width="20" border="0" />
            </a>
          </div>
        </td>
        <td width="5">&nbsp;</td>
        <td align="center" valign="middle" width="20">
          <div class="__ac_social_icons">
            <a id="email" class="__ac_social_icon_link" title="E-Mail" href="mailto:">
              <img src="https://herzkanal.img-us6.com/_social_/flat-color-round-email.png" alt="Email" width="20" border="0" />
            </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

关键修改说明： #

1. 外层容器：添加<div style="overflow-x: auto; white-space: nowrap;">包裹表格，overflow-x: auto让容器宽度不足时显示横向滚动条，white-space: nowrap强制内容不换行
2. 表格样式：给表格添加style="table-layout: fixed; border-collapse: collapse;"，table-layout: fixed固定表格布局，确保单元格宽度不被自动调整，border-collapse: collapse合并边框避免多余间距
3. 移除无效样式：原代码中<span>的overflow-x: auto无作用，已移除

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