HTMLテーブルの2番目の列のセルを選択し、CSSを使用して最初の列の最後に移動することはできますか？

Question

プログラミングで私の未熟なことを許してください - 私は可能な限り明確にしようとします。私が十分に具体的でないか、他に何か不足している場合は、私に知らせてください。

私は、HTMLの表に関する私のプロジェクトに直面している問題の解決策を探しています。デスクトップ上では、画面が親テーブルdivに収まるのに十分な大きさなので、私が好きな方法で、以下のHTMLコードを実行します。しかし、モバイルブラウザでは、親divの幅が狭くなり、テーブルがオーバーフローする原因となりました。私のテーブルは最高から最低までのリストであるため、垂直方向に読み取るので、理想的には、2番目（および次の）の列のコンテンツは、幅の狭いブラウザの最初の列の拡張のように配置されます。したがって、このコード...

<div class="parent-class"> 
 
<table> 
 
<tr class="row-one"> 
 
<td>Item 1</td> 
 
<td>Item 4</td> 
 
<td>Item 7</td> 
 
</tr> 
 
<tr class="row-two"> 
 
<td>Item 2</td> 
 
<td>Item 5</td> 
 
<td>Item 8</td> 
 
</tr> 
 
<tr class="row-three"> 
 
<td>Item 3</td> 
 
<td>Item 6</td> 
 
<td>Item 9</td> 
 
</table> 
 
</div>

...この本を読み取り：

過流小さいブラウザ、第二および第三列にしかし

|--------------------------| 
| Item 1 | Item 4 | Item 7 | 
|--------------------------| 
| Item 2 | Item 5 | Item 8 | 
|--------------------------| 
| Item 3 | Item 6 | Item 9 | 
|--------------------------| 

と水平を生成します親のスクロールバーdivは理想的ではありません。さらに、複数の列を持つ垂直テーブルを使用することは、おそらくモバイルにとっては貧弱な方法です（実際のテーブルはかなり長くなります）。

|--------| 
| Item 1 | 
|--------| 
| Item 2 | 
|--------| 
| Item 3 | 
|--------| 
| Item 4 | 
|--------| 
| Item 5 | 
|--------| 
| Item 6 | 
|--------| 
| Item 7 | 
|--------| 
| Item 8 | 
|--------| 
| Item 9 | 
|--------| 

し、可能な場合、最終的に、私はテーブルのこの「再配置」が行われることを好むだろう。だから、読みやすさを最大化し、任意のコンテンツを失わないために、私はモバイル上でこのように読み取るために、テーブルが欲しいですHTMLを変更したりJavaScriptを導入したりすることなく、CSSのみを使用します。これは貧弱な習慣かもしれないと理解していますが、問題を解決する方法を決定する前にまずそれが可能かどうかを知りたいと思います。

私は@mediaを使用し、tr:nth-child(n)を使用して関連するセルを選択しましたが、実際に説明されているように関連するセルを再配置できる解決策を見つけることができませんでした。 CSSのソリューションはありますか？代わりにJavaScriptを調べるべきですか？

ありがとうございます。

Answer 1

表をdiv/sectionsに変更し、この解決策を使用してください。

@EDIT

.parent-class { 
 
max-width: 600px; 
 
margin: 0 auto; 
 
overflow: hidden; 
 
} 
 

 
.row { 
 
box-sizing: border-box; 
 
width: 200px; 
 
float: left; 
 
margin: 0; 
 
text-align: center; 
 
} 
 

 
.row p { 
 
margin: 0; 
 
padding: 10px; 
 
border: 1px solid #888; 
 
}

<section class="parent-class"> 
 

 
\t <section class="row"> 
 
\t 
 
\t \t <p>Item1</p> 
 
\t \t <p>Item2</p> 
 
\t \t <p>Item3</p> 
 
\t \t 
 
\t </section> 
 
\t 
 
\t <section class="row"> 
 
\t 
 
\t \t <p>Item4</p> 
 
\t \t <p>Item5</p> 
 
\t \t <p>Item6</p> 
 
\t \t 
 
\t </section> 
 
\t 
 
\t <section class="row"> 
 
\t 
 
\t \t <p>Item7</p> 
 
\t \t <p>Item8</p> 
 
\t \t <p>Item9</p> 
 
\t \t 
 
\t </section> 
 
\t 
 
</section>

Additionalyあなたは.parent、クラス内で位置決め要素にメディアクエリを使用できますが、このコードは、このメソッドを使用していません。