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