Question

我正在为电子邮件制作一些表格。我有4列：Example.。我需要左边的红色背景颜色到左边框。目前有空白，填充或边距。我没有任何自定义CSS，只有框架。我一直在检查员窗口看，但无法弄清楚那个空白的原因是什么？

<!-- Wrapper for the body of the email -->
  <table class="body" data-made-with-foundation>
    <tr>
      <!-- The class, align, and <center> tag center the container -->
      <td class="float-center" align="center" valign="top">
        <center>
          <table align="center" class="container">
            <tbody>
              <tr>
                <td>
                  <table class="row">
                    <tbody>
                      <tr>
                        <th class="small-12 large-4 columns first">
                          <table style="width:20%; background-color:red;border: 1px solid black;">
                            <tr>
                              <th>
                                <p class="text-left">Column 1</p>
                              </th>
                            </tr>
                          </table>
                        </th>
                        <th class="small-12 large-4 columns first">
                          <table>
                            <tr>
                              <th>
                                <p class="text-left">Column 2</p>
                              </th>
                            </tr>
                          </table>
                        </th>
                        <th class="small-12 large-4 columns first">
                          <table>
                            <tr>
                              <th>
                                <p class="text-left">Column 3</p>
                              </th>
                            </tr>
                          </table>
                        </th>
                        <th class="small-12 large-4 columns first">
                          <table>
                            <tr>
                              <th>
                                <p class="text-left">Column 4</p>
                              </th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </center>
      </td>
    </tr>
  </table>

Answer 1

这些导致了空格：）

td.large-4.first, th.large-4.first {
      padding-left: 16px;
}
td.large-4, th.large-4 {
      width: 177.33333px;
      padding-left: 8px;
      padding-right: 8px;
}
th.columns, th.column {
     margin: 0 auto;
     Margin: 0 auto;
     padding-left: 16px;
     padding-bottom: 16px;
}

Answer 2

你的css有：

table.body .columns {
    padding-left: 16px !important
}

你可以删除！important然后再做

table.body .columns:first-child {
    padding-left: 0;
}

Answer 3

它是表格<th>的填充。

你可以写这个。它会修复它。

table th, table td {
    padding: 0 !important;
}

列左侧的填充或边距

3 个答案: