用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所示。