响应式表头未显示答案

【问题标题】：Responsive table headers not showing响应式表头未显示
【发布时间】：2018-08-19 04:39:49
【问题描述】：

我正在寻找响应式 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/

【问题讨论】：

据我所知，您使用的数据标签必须是静态的，因为它始终具有这些值。如果要动态更改标题，请在数据标签中添加动态内容

标签： html css responsive css-tables vuetify.js

【解决方案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>

【讨论】：