Question

问题

我要做一些HTML电子邮件只是为了进行测试。问题是，现在我无法重置这5个TDS之间的所有空间。我需要它们在桌子中央。

尝试

我已经尝试过了，正如许多帖子所建议的：边框间距边界崩溃重置css中的所有内容（html，body，p等）显示：内联表显示：内联广告块

这只是较大表中感兴趣的行，其他行运行正常。

我不知道该怎么解决。

期望

在中心处彼此靠近的五个正方形

代码

<table id="bodyTable" width="100%" bgcolor="#efefef" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto; font-family: Museo, Helvetica, Arial, sans-serif">
    <tr>
      <td>
        <table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px">
          <tr>
            <tr>
                <td>
                  <table width="600px" border="0" cellspacing="0" cellpadding="0" bgcolor="#efefef">
                    <tr>
                      <td align="center">
                        <img style="height: 30px; padding: 10px" src="https://i.ibb.co/y48sqQs/Goglueplus-Logo.png" alt="twitterButton">
                      </td>
                      <td align="center">
                        <img style="height: 30px; padding: 10px;" src="https://i.ibb.co/m5nZrrg/facebook-Mini-Button.png" alt="facebookButton">
                      </td>
                      <td align="center">
                        <img style="height: 30px; padding: 10px" src="https://i.ibb.co/cxLcQcQ/Instagram-Logo.png" alt="googlePlusButton">
                      </td>
                      <td align="center">
                        <img style="height: 30px; padding: 10px" src="https://i.ibb.co/rxT4vzx/Linkedin-Button.png" alt="linkedinButton">
                      </td>
                      <td align="center">
                        <img style="height: 30px; padding: 10px" src="https://i.ibb.co/3FCYZ4z/twitter-Button.png" alt="instagramButton">
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
</tr>
        </table>
      </td>
    </tr>
  </table>

CSS重置

body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100% !important;
      -ms-text-size-adjust: 100% !important;
      -webkit-font-smoothing: antialiased !important;
    }

    img {
      border: 0 none !important;
      display: block;
      height: auto;
      line-height: 100%;
      outline: none !important;
      text-decoration: none;
    }

    a img {
      border: 0 none;
    }

    table, td {
      border-collapse: collapse;
      border: 0 none;
    }

    td, a, span {
      mso-line-height-rule: exactly;
    }

    p {
      Margin: 0px !important;
      Padding: 0px !important;
    }

    #bodyTable{
      height: 100% !important;
      margin: 0;
      padding: 0;
      width: 100% !important;
      -webkit-text-size-adjust: 100% !important;
      -ms-text-size-adjust: 100% !important;
      -webkit-font-smoothing: antialiased !important;
    }

Answer 1

在HTML中，表格宽度为600px。尝试将其居中放置300px。

body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  -webkit-font-smoothing: antialiased !important;
}

img {
  border: 0 none !important;
  display: block;
  height: auto;
  line-height: 100%;
  outline: none !important;
  text-decoration: none;
}

a img {
  border: 0 none;
}

table,
td {
  border-collapse: collapse;
  border: 0 none;
}

td,
a,
span {
  mso-line-height-rule: exactly;
}

p {
  Margin: 0px !important;
  Padding: 0px !important;
}

#bodyTable {
  height: 100% !important;
  margin: 0;
  padding: 0;
  width: 100% !important;
  -webkit-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  -webkit-font-smoothing: antialiased !important;
}

<table id="bodyTable" width="100%" bgcolor="#efefef" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto; font-family: Museo, Helvetica, Arial, sans-serif">
  <tr>
    <td>
      <table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px">
        <tr>
          <tr>
            <td>
              <table width="300px" border="0" cellspacing="0" cellpadding="0" bgcolor="#efefef">
                <tr>
                  <td align="center">
                    <img style="height: 30px; padding: 10px" src="https://i.ibb.co/y48sqQs/Goglueplus-Logo.png" alt="twitterButton">
                  </td>
                  <td align="center">
                    <img style="height: 30px; padding: 10px;" src="https://i.ibb.co/m5nZrrg/facebook-Mini-Button.png" alt="facebookButton">
                  </td>
                  <td align="center">
                    <img style="height: 30px; padding: 10px" src="https://i.ibb.co/cxLcQcQ/Instagram-Logo.png" alt="googlePlusButton">
                  </td>
                  <td align="center">
                    <img style="height: 30px; padding: 10px" src="https://i.ibb.co/rxT4vzx/Linkedin-Button.png" alt="linkedinButton">
                  </td>
                  <td align="center">
                    <img style="height: 30px; padding: 10px" src="https://i.ibb.co/3FCYZ4z/twitter-Button.png" alt="instagramButton">
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </tr>
      </table>

td中心对齐，没有空格，边框和填充

1 个答案: