响应数据表

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

如果用户在桌面上，表格应该呈现如下图所示：正如您所看到的，我的标题项在左侧，数据值在右侧。

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

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

但是，如果用户减少了我想继续前进行顶部的标题项目和值以下

表头项目屏幕尺寸1
行1值1 |第1行值| |

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

我在想使用Div的可能是我最好的方式来得到这个结果，但没有任何其他建议吗？

谢谢！

来源

2012-02-08 fivepix

如果是表格数据，使用'

'是最好的方法。为了使它成为“响应式”，那么所有人都需要几个媒体查询来根据视口大小更新表格。 – rxgx2012-02-08 01:57:24

回答

This是一个关于隐藏基于屏幕宽度的元素的神奇文章。您可以使用一些CSS媒体查询打开和关闭某些“可选”或“基本”类别的元素。希望这可以帮助！

来源

2012-02-08 03:03:34 Stevie

如何这种类型的东西 - 集合中的小区内联表：

<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>

来源

2012-10-28 17:48:46 paulusm

从我个人的经验，最好是用DIV超过表继续前进。在分析您的需求div将是最合适的选择。

来源

2013-08-07 09:56:57

回答

相关问题