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

【问题标题】：How to add responsive COLLAPSABLE table in email with CSS?如何使用 CSS 在电子邮件中添加响应式 COLLAPSIBLE 表？
【发布时间】：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() 功能将其发送到谷歌帐户。

【问题讨论】：

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

标签： php html css email responsive

【解决方案1】：

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

【讨论】：

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