响应垂直html表

如果我有一个垂直定义的表，带有标题，如下所示：

标题1
标题2
标题3
标题4
标题5
标题6
标题7
标题8
标题1的内容
标题2的内容
标题3的内容
标题4的内容
标题5的内容
标题6的内容
标题7的内容
标题8的内容
标题1的内容
标题2的内容
标题3的内容
标题4的内容
标题5的内容
标题6的内容
标题7的内容
标题8的内容
标题1的内容
标题2的内容
标题3的内容
标题4的内容
标题5的内容
标题6的内容
标题7的内容
标题8的内容
标题1的内容
标题2的内容
标题3的内容
标题4的内容
标题5的内容
标题6的内容
标题7的内容
标题8的内容

读取方向为从左到右，向下读取每列。 我将如何使其具有移动响应能力

我想象一根柱子叠在一起。像这样：

---

您要查找的是媒体查询。使用媒体查询，您可以根据页面最大/最小宽度使用CSS设置页面样式

更多信息，请看这个

下面是一个示例，当屏幕的最大宽度为900px时，将应用以下CSS。超出该范围的任何内容都将应用上述CSS

.example {
  font-size: 7rem;
  width: 75%;
}

@media screen and (max-width: 900px){

.example {
  font-size: 3.5rem;
  width: 50%;
}

}

删除表格样式

将格式化上下文设置为flexbox

使用

order

属性对表格单元格重新排序

表格*{
显示：内容；
}
桌子{
显示器：flex；
弯曲方向：立柱；
}
th，td{
显示：块；
文本对齐：居中；
}
tr>*：第n个子（1）{顺序：1；}
tr>*：第n个子（2）{顺序：2；}
tr>*：第n个子（3）{顺序：3；}
tr>*：第n个子（4）{顺序：4；}
tr>*：第n个子（5）{顺序：5；}
tr>*：第n个子（6）{顺序：6；}
tr>*：第n个子（7）{顺序：7；}
tr>*：第n个子（8）{顺序：8；}

标题1
标题2
标题3
标题4
标题5
标题6
标题7
标题8
标题1的内容
标题2的内容
标题3的内容
标题4的内容
标题5的内容
标题6的内容
标题7的内容
标题8的内容
标题1的内容
标题2的内容
标题3的内容
标题4的内容
标题5的内容
标题6的内容
标题7的内容
标题8的内容
标题1的内容
标题2的内容
标题3的内容
标题4的内容
标题5的内容
标题6的内容
标题7的内容
标题8的内容
标题1的内容
标题2的内容
标题3的内容
标题4的内容
标题5的内容
标题6的内容
标题7的内容
标题8的内容

无可否认是正确的。我确实需要使用媒体查询。不过，我正在寻找那些查询中的特定CSS：）啊，明白了。对我来说，从你的问题上看，你是想要CSS的细节，还是仅仅是如何制作一个响应性强的页面，这并不是非常清楚。太棒了！这很有效：

.example {
  font-size: 7rem;
  width: 75%;
}

@media screen and (max-width: 900px){

.example {
  font-size: 3.5rem;
  width: 50%;
}

}