Question

我正在尝试建立一个HTML表，以便在移动设备上查看时将td的垂直方向堆叠为卡片形式。

问题在于它可以在台式机的窄屏上实现预期的功能，而不能在移动设备上实现。

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

还有其他建议吗？

我尝试了几种不同的教程和codePens，声称它们具有“可移动式卡片式响应表”的代码，但在iOS 12 Safari或Chrome上进行测试时，它们都无法在真正的移动设备上正常工作。 / p>

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

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

可能是什么问题？

Answer 1

由于标记后立即由

引起的HTML格式错误，这可能无法正常工作。如果您在检查器中查看DOM树，则中的项目最终将位于内部。无法对此进行测试，但是如果删除此div和之后出现的关闭div，则可以解决此问题。或在中移动这些div。

我要转到您在注释中提供的链接，该代码与上面的代码不同。

答案 1 :(得分：0)

通过从JsFiddle复制代码的框架实例和工作实例，我对它进行了逆向工程，一一删除，最后发现整个问题是由于import FetchCSV from "./FetchCSV"是在HTML文档的顶部缺少。

gh。

已解决。

答案 2 :(得分：-1)

您似乎没有使用媒体查询来识别设备。调整桌面浏览器的大小与针对特定的较小设备不同。

在文档头中尝试类似的操作，指定所需的视口尺寸，并在其中添加样式信息-。

或者，您可以将样式包括在当前样式表的大括号内-@media屏幕和（最小设备宽度：320像素）或其他和（最大设备宽度：568px）或其他和（-webkit-min-device-pixel-ratio：2）{ -您的风格在这里- }

Answer 2

通过从JsFiddle复制代码的框架实例和工作实例，我对它进行了逆向工程，一一删除，最后发现整个问题是由于import FetchCSV from "./FetchCSV"是在HTML文档的顶部缺少。

gh。

已解决。

Answer 3

您似乎没有使用媒体查询来识别设备。调整桌面浏览器的大小与针对特定的较小设备不同。

在文档头中尝试类似的操作，指定所需的视口尺寸，并在其中添加样式信息-。

或者，您可以将样式包括在当前样式表的大括号内-@media屏幕和（最小设备宽度：320像素）或其他和（最大设备宽度：568px）或其他和（-webkit-min-device-pixel-ratio：2）{ -您的风格在这里- }

为什么此html表在台式机上响应，但在移动设备上却不响应？

3 个答案: