当我的网站在手机屏幕大小时，我希望一些信息显示为列表。当我的网站是在一个较大的屏幕尺寸，我希望同样的位信息显示为一个表格。我该怎么做？

另一种可能性是改变表格标题的方向，因此它们不是沿着表格的顶部从左到右运行，而是从左上角开始从上到下运行，信息从左到右水平显示。这可能吗？

我只知道HTML和CSS，所以目前只有使用这些语言的解决方案才是可行的。谢谢！

顺晟科技：

这不是table的目的。

如果您想保留表的外观和感觉，同时还想使其具有响应性，请尝试使用Flexbox。

要实现此功能，我们可以使用媒体查询来切换flex-wrap: wrap样式。

的示例在屏幕宽度小于600px时换行。

<代码>.行{显示：Flex；}.row.headers DIV{背景色：浅灰色；}.行DIV{宽度：100%；}@仅媒体屏幕和（最大宽度：600px）{.行{Flex-Wrap：缠绕；}}

<代码><；DIV类=“行标题”>；<；DIV>；标题1<；/DIV>；<；DIV—gt；标题2&；lt；/DIV—gt；&；Lt；标题3<；/DIV>；<；/DIV>；<；DIV类=“ row ”>；<；DIV>；第1列<；/DIV>；<；DIV&>；第2列&；lt；/DIV amp；gt；&；Lt；DIV&>；第3列<；/DIV>；<；/DIV>；

好吧，让我们看看我能不能解决这个问题。在移动设备上，您希望将某些信息显示为列表，而在较大的屏幕上，您希望将某些信息显示为表格。为此，我将使用JavaScript根据屏幕大小附加列表和表格。它效率不高，但是，您可能应该使用jQuery.附件是一个片段，表明无序列表应该只出现在小于或等于650px的屏幕上（移动设备）。

编辑

好的，从JavaScript开始，正如你在上面的回答中所看到的，CSS中的媒体查询是一条可行之路。

.row{
  display:flex;
}
.row.headers div{
  background-color:lightgrey;
}
.row div{
  width:100%;
}

@media only screen and (max-width: 600px) {
  .row{
    flex-wrap:wrap;
  }
}

<代码>正文{保证金：0；填充：0；}

<代码><；！文档类型HTML>；<；HTML（>；）<；头部>；<；标题>；<；/标题>；<；/标题>；<；身体>；<；DIV类=“ main ”>；  <；/DIV>；<；/正文>；<；/HTML>；