时间戳

首页 > 解决方案 > 如何在表格中的 TD 列之间添加间距？

html - 如何在表格中的 TD 列之间添加间距？

问题描述

我正在修复使用表格的电子邮件，并且正在尝试在td标签中添加按钮。我面临的问题是，无论我尝试什么，我似乎都无法在每个按钮之间留出空格。这是它现在的样子：

在此处输入图像描述

这是生成它的 HTML（它是重复的）：

<table>
  <tr>
    <td class="button">
      <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 240px; min-width: 120px; border-collapse: collapse; border-spacing: 0; padding: 0;">
        <tr>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://google.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://facebook.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://twitter.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://twitter.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td class="button">
      <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 240px; min-width: 120px; border-collapse: collapse; border-spacing: 0; padding: 0;">
        <tr>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://google.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://facebook.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://twitter.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://twitter.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

不知道如何解决这个问题，无论我尝试什么都不会添加空格。

编辑：得到它的工作，谢谢！

在此处输入图像描述

标签： htmlcss

解决方案

您将border-collapse属性设置为collapse. 将其更改为separate然后添加一些border-spacing：

<table>
  <tr>
    <td class="button">
      <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 240px; min-width: 120px; border-collapse: separate; border-spacing: 5px 0; padding: 0;">
        <tr>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://google.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://facebook.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://twitter.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://twitter.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td class="button">
      <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 240px; min-width: 120px; border-collapse: separate; border-spacing: 5px 0;  padding: 0;">
        <tr>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://google.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://facebook.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://twitter.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
          <td align="center" valign="middle" style="padding: 12px 24px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#E9703E">
            <a target="_blank" href="https://twitter.com" style="text-decoration: underline; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">Verify ORCiD</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

推荐阅读