html - 在 html 电子邮件中包装表格

Question

我有 3 张带有标题的图像，它们放在 3 个单独的表格中(用于格式化)。我需要它们排成一排，但当超过一定宽度时，我需要它们堆叠在 1 列中。

考虑到电子邮件客户端的限制(例如，不能使用 display:inline-block，因为它未被所有浏览器覆盖)，这是否可能实现此结果？

<table style="width:100%; max-width:300px">
  <tbody>
    <tr>
      <td>

        <!-- Image GROUP -->

        <!-- Image 1 -->
        <table style="width:100%; max-width:100px">
          <tbody>
            <tr>
              <td align="center">
                <img src="https://placehold.it/100x100?text=%20" style="width:100%; max-width:100px" />
              </td>
            </tr>
            <tr>
              <td align="center">
                <p>Image title</p>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- Image 2 -->
        <table style="width:100%; max-width:100px">
          <tbody>
            <tr>
              <td align="center">
                <img src="https://placehold.it/100x100?text=%20" style="width:100%; max-width:100px" />
              </td>
            </tr>
            <tr>
              <td align="center">
                <p>Image title</p>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- Image 3 -->
        <table style="width:100%; max-width:100px">
          <tbody>
            <tr>
              <td align="center">
                <img src="https://placehold.it/100x100?text=%20" style="width:100%; max-width:100px" />
              </td>
            </tr>
            <tr>
              <td align="center">
                <p>Image title</p>
              </td>
            </tr>
          </tbody>
        </table>


      </td>
    </tr>
  </tbody>
</table>

jsfiddle 链接:https://jsfiddle.net/k4dxbo22/

Answer 1

通常最好在 html 文件之外练习样式。原因是当代码开始变大时，您不想一次修改一个元素。 在这种情况下，许多选项之一是用 <div></div> 包装每个表并向它们添加类。 一旦你分配了一个类，或者你可以在你的 html 文件中这样做，无论你喜欢哪个，你都可以使用 float属性来实现你想要的。 在这种情况下 float:left; .如果您不应用任何 float默认情况下，html 文档将垂直堆叠。 另外，请注意，在设置宽度时，它可能会溢出到下一行。看例子

.table1{
  float:left;
}

.table2{
  float:left;
}

.table3{
  float:left;
}

        <!-- Image 1 -->

<div class="table1">

        <table style="width:100%; max-width:100px">
          <tbody>
            <tr>
              <td align="center">
                <img src="https://placehold.it/100x100?text=%20" style="width:100%; max-width:100px"/>
              </td>
            </tr>
            <tr>
              <td align="center">
                <p>Image title</p>
              </td>
            </tr>
          </tbody>
        </table>

  
</div>

<div class="table2">

        <table style="width:100%; max-width:100px">
          <tbody>
            <tr>
              <td align="center">
                <img src="https://placehold.it/100x100?text=%20" style="width:100%; max-width:100px"/>
              </td>
            </tr>
            <tr>
              <td align="center">
                <p>Image title</p>
              </td>
            </tr>
          </tbody>
        </table>

  
</div>


<div class="table3">

        <table style="width:100%; max-width:100px">
          <tbody>
            <tr>
              <td align="center">
                <img src="https://placehold.it/100x100?text=%20" style="width:100%; max-width:100px"/>
              </td>
            </tr>
            <tr>
              <td align="center">
                <p>Image title</p>
              </td>
            </tr>
          </tbody>
        </table>

  
</div>