用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>

​

Answer 2

您可以将其他值应用于该表元素的display属性，因此可以轻松地更改布局。这是一种常见的响应式设计技术，我们通常会将每个表行显示在其自己的块中，然后再分解为t

下面是使用此技术显示内容单元格位于标题单元格所在行右侧的CodePen：https://codepen.io/jrrdnx/pen/oeWmzL

不幸的是，由于表格的结构方式，我不认为有办法在第一行的一个单元格、第二行的一个单元格，然后跳回第一行的另一个单元格之间切换，等等。如果您知道每个单元格的内容长度，就可以为相应的表格单元格提供适当的填充，以使内容错开(如#table3中的CodePen所示)。