响应式表格标题未显示

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

然而，这样做的问题是，我需要为我的每个td都有一个静态data-label，以便列标题可以使用，这不是很容易扩展。有没有人知道一种我可以编写CSS的方法，它可以自动显示列标题，而不必指定data-label？下面是我手动指定data-label的当前解决方案的jsfiddle

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>

​