html - 列左侧的填充或边距

Question

我正在为电子邮件制作一些表格。我有 4 列:Example. .我需要左边的红色背景色才能到达左边界。目前有空白、填充或边距。我没有任何自定义 CSS，只有框架。我一直在检查器窗口中查看，但无法弄清楚是什么导致出现空白？

Fiddle

<!-- 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;
}