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

我有一个包含多行和多列的表。它在大屏幕上工作得很好，但我正试图让它更容易在手机上阅读，而且我可以通过一列宽多列高的方式轻松地为小型手机呈现信息。保持当前列在一起对我来说很重要，否则我正在考虑设置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>

---

如果您愿意删除

表

标记/结构，并且不需要，您可以使用

/*Rugular 7宽屏网格*/
#时间表{
显示：网格；
网格模板列：重复（7，1fr）；
}
.head{字体大小：粗体；}
/*窄样式-根据需要调整最大宽度*/
@媒体屏幕和屏幕（最大宽度：480px）
{
/*换成1列*/
#明细表{网格模板列：1fr；}
/*重新排列内容*/
#附表>：第n个子（7n+1）{顺序：1；}
#附表>：第n个子（7n+2）{顺序：2；}
#附表>：第n个子（7n+3）{顺序：3；}
#附表>：第n个子（7n+4）{顺序：4；}
#附表>：第n个子（7n+5）{顺序：5；}
#附表>：第n个子（7n+6）{顺序：6；}
#附表>：第n个子（7n+7）{顺序：7；}
/*为组添加一些间距*/
.head:not（：第一个子项）{margin top:0.5em；}
}

蒙特斯韦德赫斯福里斯萨特桑
周一、周二、周四、周日、周日
星期一星期二星期三星期二下午二时

列是否为固定数字？类似地，行是一个固定的数字吗？html是一成不变的还是可以设置属性的？它是针对每周计划的，一周中的几天有七列，根据当天的事件有不同的行数。可以修改HTML和HTML格式。目前有一些跨多天事件的colspans。请给出一个适当的示例，说明您刚才在最后一条评论中描述的内容，以及您希望输出结果是什么样的。“一周中的七天有七列，根据当天的事件有不同数量的行”-这没有什么意义，一个表的不同列中不能有不同数量的行。我能看到的唯一方法是使用css实现这一点，并为更宽的屏幕维护一个表，即使用两个单独的结构，并在媒体查询中根据需要隐藏和显示。问题是内容重复。谢谢@JonP。这就是我自己的想法，但我希望我错了，可以用CSS来代替。

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