0

私は現在、クライアント向けの電子メール テンプレートに取り組んでいますが、電子メール テンプレートのコーディングが嫌いな理由を思い出しました。

基本的に、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>

見やすいように背景色を設定しています。

これが私のフィドルです。

ご覧のとおり、これらの列はその行で均一化されていません。真ん中にスペースがありすぎます。私は一生、理由を理解することはできません。

何か助けはありますか？

4

2 に答える 2

1

これを試しましたか？

table {table-layout: fixed;}

これにより、テーブルのレイアウトをより詳細に制御できるようになり、独自に決定を下すことがなくなります。

于 2014-12-12T04:32:53.673 に答える
1

ちょっと考えてみてください-構造をより多くのテーブル（ネストされたテーブル）に分離できるので、同じ列のアイテムが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>
于 2014-12-12T04:44:37.200 に答える