html电子邮件表格单元格堆叠

Question

我有一个请求，要为一封 html 电子邮件做一些复杂的堆叠。 HTML 表格如下所示:

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>

这显示为:

-------------------------
|data...|data...|data...|
-------------------------

在移动 View 中，我希望它显示为:

-----------------
|data...        |
-----------------
|data...|data...|
-----------------

我需要在我的媒体样式表中添加什么才能实现这一点？谢谢!

Answer 1

众所周知，表格的响应能力很差。最好的办法是添加一个媒体查询，将您的表组件(table、tr 和 td)转换为 block-level elements 在移动宽度。默认情况下，作为 block 级元素，它们将彼此重叠。

从这里开始，如果您想在第一行显示两个元素，在第二行显示一个元素，您可以简单地 float left 的单元格，并指定 width 在 table 上，这将强制第三个单元格溢出到下一行。

这可以从以下方面看出:

@media screen and (max-width: 768px) {
  table, tr, td {
    display: block;
  }
  
  table {
    width: 100px;
  }
  
  td {
    float: left;
  }
}

<table>
  <tr>
    <td>data...</td>
    <td>data...</td>
    <td>data...</td>
  </tr>
</table>

要在第一行显示一个单元格，在第二行显示两个单元格，您可以另外指定第一个单元格应占据完整的“行”宽度 td:first-of-type :

@media screen and (max-width: 768px) {
  table, tr, td {
    display: block;
  }
  
  table {
    width: 100px;
  }
  
  td {
    float: left;
  }
  
  td:first-of-type {
    width: 100px;
  }
}

<table>
  <tr>
    <td>data...</td>
    <td>data...</td>
    <td>data...</td>
  </tr>
</table>

希望这对您有所帮助!