Question

我目前正在为客户制作电子邮件模板，我记得为什么我讨厌编写电子邮件模板。

基本上我无法在行中均匀地制作4个TD空间。

以下是我的部分代码：

<tr>
  <td colspan="3" style="padding-bottom:50px;text-align:center;"><a href="#" style="display:inline-block;width:125px;background:red;"><img src="http://fpoimg.com/95x100"/></a></td>
  <td colspan="3" style="padding-bottom:50px;text-align:center;"><a href="#" style="display:inline-block;width:125px;background:blue;"><img src="http://fpoimg.com/95x100"/></a></td>
  <td colspan="3" style="padding-bottom:50px;text-align:center;"><a href="#" style="display:inline-block;width:125px;background:green;"><img src="http://fpoimg.com/95x100"/></a></td>
  <td colspan="3" style="padding-bottom:50px;text-align:center;"><a href="#" style="display:inline-block;width:125px;background:yellow;"><img src="http://fpoimg.com/95x100"/></a></td>
</tr>

我设置背景颜色只是为了便于查看。

Here's my fiddle.

正如您所看到的那样，那些列并没有在那一行中傍晚。中间有太多空间。我不能为我的生活找出原因。

任何帮助？

Answer 1

你试过这个吗？

table {table-layout: fixed;}

这使您可以更好地控制表格布局，并阻止它自己做出决策。

Answer 2

只是一个想法 - 您可以将结构分成更多的表（嵌套表），这样您就不必担心同一列中的项目会影响您的colspan宽度。

例如

<table>
  <tr>
    <td>One column content</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>Two column content</td>
          <td>Two column content</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>Three column content</td>
          <td>Three column content</td>
          <td>Three column content</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>Four column content</td>
          <td>Four column content</td>
          <td>Four column content</td>
          <td>Four column content</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

构建HTML表格时，TD宽度不均匀

2 个答案: