html - 建一个HTML表格，TD宽度不均匀

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>

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

这是我的小提琴。

如您所见，这些列在该行中没有出现。中间的空间太大了。我无法为我的生活找出原因。

有什么帮助吗？

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>