Question

我正在寻找一种响应式HTML表的解决方案，而我找到的最接近的CSS解决方案是：

@media screen and (max-width: 600px) {
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
  }

  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

  table td::before {
    content: attr(data-label);
    float: left;
  }
}

但是，与此相关的问题是我需要为每个data-label设置一个静态td，以便列标题具有可伸缩性。有人知道我可以不用自动指定data-label就能自动显示列标题的CSS吗？这是我与当前解决方案的jsfiddle，其中我手动指定了data-label：

https://jsfiddle.net/tgpfhn8m/1051/

Answer 1

您应该尝试这个

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>

      <td>1</td>
      <td>2</td>

    </tr>
  </table>
</div>

</body>
</html>

响应表标题未显示

1 个答案:

您应该尝试这个