html - 使用 CSS 重新排列 html 表格

Question

我有一个这样的 html 表格，但是有几个这样的 tbody 元素。

<table>
 <tbody>
  <tr>
   <td>Header 1</td>
   <td>Header 2</td>
  </tr>
  <tr>
   <td>Content 1</td>
   <td>Content 2</td>
  </tr>
 </tbody>
</table>

有没有什么办法可以用 CSS 改变这个表格的外观，让它看起来像这样排列的表格:

<table>
 <tbody>
  <tr>
   <td>Header 1</td>
  <tr/>
  <tr>
   <td>Content 1</td>
  </tr>
  <tr>
   <td>Header 2</td>
  </tr>
  <tr>
   <td>Content 2</td>
  <tr/>
 </tbody>
</table>

Answer 1

实现此目的的一种方法是使用具有 data 属性的伪元素。

伪元素的 content 属性将调用 data 属性，该属性将包含与该列标题相同的文本。

只需隐藏表头并使用媒体查询(或在您想要的任何其他情况下)显示伪元素。

table {
  width: 500px;
  border-collapse: collapse;
}
td {
  border: 1px solid gray;
}
@media all and (max-width: 600px) {
  tr:nth-child(1) {
    display: none;
  }
  tr {
    display: block;
    width: 100%;
  }
  tr td {
    display: block;
    width: 100%;
  }
  tr td::before {
    content: attr(data-header);
    display: block;
  }
}

<table>
  <tbody>
    <tr>
      <td>Header 1</td>
      <td>Header 2</td>
    </tr>
    <tr>
      <td data-header="Header 1">Content 1</td>
      <td data-header="Header 2">Content 2</td>
    </tr>
  </tbody>
</table>

<p style="margin-left: 210px">&larr; resize &rarr;</p>