有没有办法让克里斯科伊尔的回应＆＃34;列表＆＃34;包含动态内容的表格？

Question

克里斯·科伊尔（Chris Coyier）写了一篇关于在移动设备上制作HTML表格的excellent article，将其作为列表进行结构化。我喜欢这种方法，但我处理的表格是动态的，我不能像他那样真正进入CSS，并使用内容标签标记每个标题标题。

/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }

以下是其中的一个示例：https://css-tricks.com/examples/ResponsiveTables/responsive.php

但是有没有办法实现它，所以我不必手动标记标题？

Answer 1

带有jQuery的动态content标头

我们可以使用.index()为每个单元格分配一个列号。第一列单元格的索引号为0，第二列索引为1，第三列索引为2等。

现在我们可以使用数字识别每个列，我们可以为每个单元格提供正确的标题文本。

• 根据从header-0开始的列索引号，为每个表头提供一个动态类。

  $('th').each(function () {
      $(this).addClass('header-' + $(this).index());
  });
  

• 每个表格单元格都有一个data-header属性，其中包含相应标题的文本。它按类和匹配的索引号选择表头。

  $('td').each(function () {
      $(this).attr('data-header', $('.header-' + $(this).index()).text());
  });
  

注意：有一种更有效的方法可以实现这一目标。

完整示例

更改每个<th>中的文字，以查看每行的更改。

//Assign class to each header
$('th').each(function() {
  $(this).addClass('header-' + $(this).index());
});

//Assign a data-header attribute with the text from the corresponding header
$('td').each(function() {
  $(this).attr('data-header', $('.header-' + $(this).index()).text());
});

/* Force table to not be like tables anymore */

table,
thead,
tbody,
th,
td,
tr {
  display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */

thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
tr {
  border: 1px solid #ccc;
}
td {
  /* Behave  like a "row" */
  border: none;
  border-bottom: 1px solid #eee;
  position: relative;
  padding-left: 50%;
}
td:before {
  /* Now like a table header */
  position: absolute;
  /* Top/left values mimic padding */
  top: 6px;
  left: 6px;
  width: 45%;
  padding-right: 10px;
  white-space: nowrap;
  content: attr(data-header);
}
table {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

Answer 2

在我看到文章（和评论）后，我将复制并粘贴其中一条评论：

使用单元格的数据属性，因此内容是html而不是css：

<td data-label="First Name">Doug</td>

然后css更像是：

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