如何使用 CSS 在电子邮件中添加响应式 COLLAPSIBLE 表？

Posted 2023-03-06

技术标签:

【中文标题】如何使用 CSS 在电子邮件中添加响应式 COLLAPSIBLE 表？【英文标题】：How to add responsive COLLAPSABLE table in email with CSS? 【发布时间】：2021-05-21 17:52:14 【问题描述】：

我试过这个，并在普通浏览器（Chrome）中工作：

带有 CSS 的 html：

body 
  margin: 0;
  padding: 20px;
  font-family: sans-serif;


* 
  box-sizing: border-box;


.table 
  width: 100%;
  border-collapse: collapse;


.table td,
.table th 
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 16px;


.table th 
  background-color: darkblue;
  color: #ffffff;


.table tbody tr:nth-child(even) 
  background-color: #f5f5f5;



/*responsive*/

@media(max-width: 500px) 
  .table thead 
    display: none;
  
  * 
    display: block;
    width: 100%;
  
  .table tr 
    margin-bottom: 15px;
  
  .table td 
    text-align: right;
    padding-left: 50%;
    text-align: right;
    position: relative;
  
  .table td::before 
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 15px;
    font-size: 15px;
    font-weight: bold;
    text-align: left;

<html lang="en">

<head>
  <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
</head>

<body>
  <table class="table">

    <thead>
      <th>S.No</th>
      <th>Name</th>
      <th>Age</th>
      <th>Marks%</th>
      <th>Status</th>
    </thead>
    <tbody>
      <tr>
        <td data-label="S.No">1</td>
        <td data-label="Name">Dinesh</td>
        <td data-label="Age">34</td>
        <td data-label="Marks%">50%</td>
        <td data-label="Staus">Passed</td>
      </tr>

      <tr>
        <td data-label="S.No">2</td>
        <td data-label="Name">Kamal</td>
        <td data-label="Age">23</td>
        <td data-label="Marks%">70%</td>
        <td data-label="Staus">Passed</td>
      </tr>

      <tr>
        <td data-label="S.No">3</td>
        <td data-label="Name">Neha</td>
        <td data-label="Age">20</td>
        <td data-label="Marks%">90%</td>
        <td data-label="Staus">Passed</td>
      </tr>

      <tr>
        <td data-label="S.No">4</td>
        <td data-label="Name">Priya</td>
        <td data-label="Age">30</td>
        <td data-label="Marks%">30%</td>
        <td data-label="Staus">Failed</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

代码来自this video。如果我想通过电子邮件发送表格，需要在左侧的内容不存在。

这是一张图片：

我认为 CSS 之前的内容不起作用。

我尝试使用php mail() 功能将其发送到谷歌帐户。

【问题讨论】：

如果缺少对生成内容的支持是导致失败的原因，那么您可以尝试相反的方法。将“生成”的内容改为实际内容，将必要的单元格标签直接放在单元格中开始 - 包装成跨度或其他内容，以便它们可以隐藏然后在桌面视图中。 【参考方案1】：

这是正常的，邮件中的属性position 和content 不受支持。 https://developers.google.com/gmail/design/reference/supported_css

【讨论】：

您好，我知道您是新用户。当您回答问题时请关注this guidelines，他们说您不应该只是说他不能做某事，您还应该提供替代方案以达到预期的结果。当您不知道该怎么做时，您可以发表评论。

以上是关于如何使用 CSS 在电子邮件中添加响应式 COLLAPSIBLE 表？的主要内容，如果未能解决你的问题，请参考以下文章

学习了如何使用 HTML 和 CSS 从头开始制作响应式 HTML 电子邮件。下一步是啥？ [关闭]

添加响应式卡片视图引导程序