如果在移动设备上更改表格布局

Question

我有一个两列的表，看起来像这样。

我需要的是它涵盖了大约1000px的可用空间。然而，我的问题是当我在移动设备iphone上查看它时。桌子而不是在每个项目之后打破只是挤压桌子以适应屏幕，这是我想象它配置做的。什么是最好的方法，而不是挤压表，以使表更改其布局。我唯一能想到的是检查设备类型并通过javascript创建表格，如果不是移动设备则定期创建表格，如果移动设备，则将表格更改为包含多行的一列。

这是最好的方法吗？

Answer 1

首先停止使用表格进行布局，使用新的HTML5语义标签，这不仅可以解决这些问题，还可以帮助您进行搜索引擎优化，并使用纯CSS的强大功能，学习CSS定位，浮动以及如何设计响应式布局，如果您想要不同的设备使用不同的布局而不是使用@media queries

媒体查询Reference

Answer 2

您需要使用媒体查询。

阅读this文章，了解具体方法。

媒体查询示例：

@media only screen and (max-device-width: 480px) {

}

Answer 3

最好的方法是不要使用表格。一般来说，表格不太容易被“回应”。

你应该考虑使用两个div并使用媒体查询来定位div，这样看起来不错。我建议你看看twitter是如何做到的。您可以找到their responsive grid here

我在css tricks

找到了关于该主题的更好的文章之一