为什么这个 html 表格会在桌面上响应，而不是在移动设备上？答案

【问题标题】：Why would this html table be responsive on desktop, but not on mobile?为什么这个 html 表格会在桌面上响应，而不是在移动设备上？
【发布时间】：2019-08-09 18:56:41
【问题描述】：

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

问题在于，它在台式电脑的窄屏幕上完成了它应该做的事情，但在移动设备上却不行。

我发现视口很重要，但不能解决问题。

还有其他建议吗？

我尝试了几个不同的教程和 codePens，它们声称拥有“适合移动设备的卡片样式响应表”的代码，但在 iOS 12 Safari 或 Chrome 上进行测试时，它们都无法在真实的移动设备上运行。

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

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

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

这是JsFiddle。

可能是什么问题？

【问题讨论】：

您在移动设备上运行网站时是否尝试过alert(window.getInnerWidth)？我怀疑增加的像素密度会导致报告的屏幕宽度大于媒体查询的预期。
嗨@DavidThomas，感谢您的回复。我刚刚尝试过：它在移动设备上显示 320，正如预期的那样。
尝试在文档头部添加视口元标记。（抱歉，我目前无法在移动设备上进行测试） --
嗨@JamesAllen，感谢您的帮助，但视口元标记已经存在。
这没什么用，但是在我的手机中查看你的 JS Fiddle，使用整页结果（jsfiddle.net/zfgL6c8p/embedded/result），它可以完美运行（Android 8.1.0，Chrome 76.0.x）显示卡片符合预期。

标签： html css responsive

【解决方案1】：

通过从 JsFiddle 复制代码的框架和工作实例，我对其进行逆向工程，逐个删除内容，最后发现整个问题是由于缺少 <!DOCTYPE HTML> 引起的HTML 文档的顶部。

呃。

解决了。

【讨论】：

【解决方案2】：

这可能是由于标记之后的

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

我将通过您在评论中提供的链接进行操作，该链接的代码与上面的不同。

【讨论】：

猜得好，但我后来添加它只是为了测试一些东西，忘记了。问题仍然存在。：我在 2 部 iPhone 和 1 部 iPad 上测试，都产生相同的结尾end result。
嗨@John，想通了。这是 HTML 文档中缺少的 <!DOCTYPE HTML>。 ?