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

これを行う方法の1つは、data属性の疑似要素を使用することです。

擬似要素のプロパティは、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プロパティに他の値を適用することができるしていますレイアウトを簡単に変更することができます。これは一般的なレスポンシブデザイン手法です。通常、各テーブルの行をそれぞれのブロックに表示してから、

このテクニックを使用して、行の右側にコンテンツセルがある行を表示するCodePenがありますヘッダーセルを使用する：https://codepen.io/jrrdnx/pen/oeWmzL

残念ながら、テーブルが構造化されている方法では、最初の行の1つのセル、2番目の行の1つのセルを交互に入れ替えて別のセルにジャンプする方法はないと思います各セルの内容の長さを知っている場合は、内容をずらすために適切な詰め物を適切な表のセルに用意することができます（コードペーンの#table3。