HTML/CSS中第一个单元格作为整行的响应表

我需要用HTML/CSS创建一个响应表。当空间变紧时，我需要行的第一个单元格作为一个完整的行，如下所示。在任何情况下，柱c2、c3、c4都应该保持垂直排列，就像正常的表格一样。有什么想法吗

正常视图：

+-----------------------+--------+------+------+
|           c1          |   c2   |   c3 |  c4  |
+-----------------------+--------+------+------+

移动视图：

+---------------------+
|           c1        |
+---------+------+----+
|   c2    |   c3 | c4 |
+---------+------+----+
|           c1        |
+---------+------+----+
|   c2    |   c3 | c4 |
+---------+------+----+

这可以用一个简单的方法来完成

在这里，我使用JavaScript打开和关闭类，以显示样式可以如何更改。但是，您可以实现相同的效果 当大小大于指定断点时，通过不定义span.mobile和.grid.mobile样式进行媒体查询

有关如何使用网格生成响应表的更多信息，请参见

const elements=document.queryselectoral.mobile'； setInterval=>{ elements.forEachel=>el.classList.toggle'mobile'； }, 1000; .电网{ 显示：网格； 网格模板列：repeat4，1fr； 边框顶部：1件纯黑； 右边框：1px纯黑； } /*使用媒体查询切换以下样式*/ .grid.mobile{ 网格模板列：repeat3，1fr； } .grid>span{ 填充：4px4px； 左边框：1px纯黑； 边框底部：1px纯黑； } /*使用媒体查询切换以下样式*/ span.mobile{ 网格柱：1/4； 字体大小：粗体； 文本对齐：居中； } c1 c2 c3 补体第四成份 c1 c2 c3 补体第四成份 c1 c2 c3 补体第四成份

---

是的，这在媒体查询中是可能的，但这种特殊的方法很难看，而且涉及重复

为移动设备设置专用行。使用媒体查询隐藏和显示此行。使用相同的媒体查询在移动设备上隐藏单元格

桌子{ 宽度：100%； } 莫罗先生{ 显示：无； } @介质最大宽度：500px{ 莫罗先生{ 显示：表格行； } 德塞尔先生{ 显示：无； } } C1 C1 C2 C3 补体第四成份 C1 C1 C2 C3 补体第四成份

---

好吧，我想它不再是table了，它更像是grid。除了@ishidex2所说的，你还可以多次重复c1。这与CSS网格或表格不一致。你需要创建额外的元素，并且只在手机上显示它们。这在HTML表格和CSS中是做不到的。看，这可以通过媒体查询来完成。好吧，这是可能的。。。。。但如果你要严格遵守规则，那就太难看了。