Question

我正在尝试创建一个响应式数据网格，可以根据屏幕的宽度更改布局。我知道如何使用媒体查询，但我正在试图找出构建实际数据网格的最佳方法。我应该使用表格，div还是列表？

如果用户在桌面上，表格应该像这样渲染：如您所见，左侧有标题项，右侧有数据值。

表头项目1 |第1行第1行|第1行第2行|第1行第3行|

表头项目2 |第2行值1 |第2行第2行|第2行第3行|

但是如果用户缩小了屏幕尺寸，我想将顶部的标题项和下面一行的值移动

表头项目1
  第1行第1行|第1行第2行|

表头项目2
  第2行值1 |第2行第2行|

我在想使用Div可能是获得此结果的最佳方法，但是有没有其他任何建议？

谢谢！

Answer 1

This是关于根据屏幕宽度隐藏元素的精彩文章。您使用一些CSS媒体查询来打开和关闭某些“可选”或“必要”类的元素。希望这有帮助！

Answer 2

这种类型的东西怎么样 - 将单元格设置为内联表：

<html>
<head>
    <style>
    #data{width:70%;}
    #data td {display:inline-table;padding:20px;}
    </style>

</head>
<body>

<table id="data">
    <tr><th>Header 1</th>
        <td>row 1 cell 1</td><td>row 1 cell 2</td>
    </tr>
    <tr><th>Header 2</th>
        <td>row 2 cell 1</td><td>row 2 cell 2</td>
    </tr>
</table>
</body>
</html>

Answer 3

从我个人的经验来看，最好继续使用div而不是桌子。在分析您的要求时，div将是最合适的选择。

响应数据表

3 个答案: