为什么这个 html table 在桌面上有响应，但在移动设备上却没有？

Question

我正在尝试构建一个 HTML table，当在移动设备上查看时，它会将 td 垂直堆叠成卡片形式。

问题是它在台式电脑的窄屏幕上可以正常工作，但在移动设备上却不行。

我发现视口很重要，但没有解决问题。

还有其他建议吗？

我尝试了几个不同的教程和 codePens，它们声称拥有 "mobile-friendly cards style responsive table" 的代码，但在 iOS 12 Safari 或 Chrome.

最好的情况：table 看起来很奇怪，最坏的情况：table 保持水平。

<style>
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 0;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
table caption {
  text-align: left;
  font-size: 1.3em;
  margin: .5em 0 .75em;
}
table thead {
  display: none;
}
table tr {
  display: block;
  border: 1px solid #eee;
  padding: 1em 1em .5em;
}
table tr + tr {
  margin-top: .625em;
}
table td {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #eee;
  font-size: .8em;
  line-height: 1.35em;
}

table td:before {
  content: attr(data-label);
  font-size: .90em;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  max-width: 45%;
  color: #545454;
}
table td + td {
  margin-top: .8em;
}
table td:last-child {
  border-bottom: 0;
}

@media screen and (min-width: 600px) {
  table caption {
    font-size: 1.5em;
  }
  table thead {
    display: table-header-group;
  }
  table tr {
    display: table-row;
    border: 0;
  }
  table th, table td {
    text-align: center;
  }
  table th {
    font-size: .85em;
    text-transform: uppercase;
  }
  table td {
    display: table-cell;
  }
  table td:before {
    display: none;
  }
  table td:last-child {
    border-bottom: 1px solid #eee;
  }
}
</style>

<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link async href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
    </head>

    <body>
        <table>
         <caption>Documents Details</caption>
         <thead>
          <tr>
           <th scope="col">Cluster</th>
           <th scope="col">Pending Approval</th>
           <th scope="col">Pending Signature</th>
           <th scope="col">Overdue</th>
           <th scope="col">Complete</th>
          </tr>
         </thead>
         <tbody>
          <tr>
           <td data-label="Cluster">Learning Complex 1</td>
           <td data-label="Pending Approval">9</td>
           <td data-label="Pending Signature">33</td>
           <td data-label="Overdue">5</td>
           <td data-label="Complete">55</td>
          </tr>
          <tr>
           <td scope="row" data-label="Cluster">Learning Complex 2</td>
           <td data-label="Pending Approval">21</td>
           <td data-label="Pending Signature">33</td>
           <td data-label="Overdue">2</td>
           <td data-label="Complete">46</td>
          </tr>
          <tr>
           <td scope="row" data-label="Cluster">Learning Complex 3</td>
           <td data-label="Pending Approval">18</td>
           <td data-label="Pending Signature">14</td>
           <td data-label="Overdue">8</td>
           <td data-label="Complete">54</td>
          </tr>
         </tbody>
        </table>  
    </body>

</html>

我希望 table 在移动设备上查看时将每一行垂直堆叠成一张卡片，但它不起作用。奇怪的是，它确实可以在桌面上运行。

这里是 JsFiddle。

可能是什么问题？

Answer 1

由于标签之后的

导致格式错误 HTML，这可能无法正常工作。如果您在检查器中查看 DOM 树，中的项目最终位于中。无法对此进行测试，但如果您删除此 div 和出现在之后的结束 div，那么它可能会解决问题。或者将那些 div 移动到中。

我按照您在评论中给出的 link 进行操作，该代码与上面的代码不同。

Answer 2

通过从 JsFiddle 复制代码的框架和工作实例，我通过一个一个地删除东西对其进行了逆向工程，最后发现整个 问题是由 [= HTML 文档顶部缺少 10=]。

呃。

已解决。

为什么这个 html table 在桌面上有响应，但在移动设备上却没有？

Why would this html table be responsive on desktop, but not on mobile?

html

css

responsive