Question

我有一个要求为html电子邮件进行复杂堆叠的请求。 HTML表格如下所示：

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

显示为：

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

在移动视图中，我希望它显示为：

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

我需要在媒体样式表中添加什么才能实现这一目标？谢谢！

Answer 1

众所周知，表格在响应性方面表现不佳。您最好的选择是添加一个媒体查询，将您的表格组件（table，tr和td）转换为移动设备上的 block-level elements 宽度。作为块级元素，默认情况下它们将相互叠加。

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

这可以在以下内容中看到：

@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>

希望这有帮助！

Answer 2

您可以在CSS3中使用Media Query作为响应目的。否则，如果您想简化，可以在responsive table class上使用Bootstrap v4.0 magic。最好先了解Media Query的概念。

html电子邮件表格格式堆叠

2 个答案: