使用CSS为小屏幕重新格式化表格-保持列在一起

Question

我有一个包含多行和多列的表。它在大型显示器上运行良好，但我正在努力让它更容易在手机上阅读，我可以通过一列宽和多列高轻松地为小型手机呈现信息。保持当前列在一起对我来说很重要，否则我会考虑将设置为display:block。

<table>
<tr><td>COL 1</td><td>COL 2</td><td>COL 3</td><td>COL 4</td><td>COL 5</td></tr>
<tr><td>COL 1</td><td>COL 2</td><td>COL 3</td><td>COL 4</td><td>COL 5</td></tr>
<tr><td>COL 1</td><td>COL 2</td><td>COL 3</td><td>COL 4</td><td>COL 5</td></tr>
</table>

有什么办法可以把我的专栏放在一起吗？我想把它保持为：

COL 1
COL 1
COL 1
COL 2
COL 2
COL 2
COL 3
COL 3
COL 3
COL 4
COL 4
COL 4
COL 5
COL 5
COL 5

Answer 1

如果您愿意放弃table标记/结构，并且不需要强大的IE支持，可以使用CSS网格

/*Rugular  7 Wide Grid for wide screen*/
#schedule {
display:grid; 
grid-template-columns: repeat(7, 1fr);
}
.head {font-weight:bold;}
/*Style for narrow - adjust max-width as needed*/
@media screen and (max-width: 480px)
{
/*Change to 1 col*/
#schedule {grid-template-columns:1fr;}
/*Re order the content*/
#schedule > :nth-child(7n + 1) {order:1;}
#schedule > :nth-child(7n + 2) {order:2;}
#schedule > :nth-child(7n + 3) {order:3;}
#schedule > :nth-child(7n + 4) {order:4;}
#schedule > :nth-child(7n + 5) {order:5;}
#schedule > :nth-child(7n + 6) {order:6;}
#schedule > :nth-child(7n + 7) {order:7;}

/*Add some spacing to the groups*/
.head:not(:first-child) {margin-top:0.5em;}
}

<div id="schedule">
<!-- "Header" Row -->
<div class="head">Mon</div><div class="head">Tues</div><div class="head">Wed</div><div class="head">Thurs</div><div class="head">Fri</div><div class="head">Sat</div><div class="head">Sun</div>
<!-- First Row -->
<div>Mon 1</div><div>Tues 1</div><div>Wed 1</div><div>Thurs 1</div><div>Fri 1</div><div >Sat 1</div><div>Sun 1</div>
<!-- Second Row -->
<div>Mon 2</div><div>Tues 2</div><div>Wed 2</div><div>Thurs 2</div><div>Fri 2</div><div >Sat 2</div><div>Sun 2</div>
</div>