响应表与不同的布局选项

Question

我们正在尝试在我的网页上的网格中显示需要响应的数据。我们希望有两个断点来满足我们的目标形式因素。

这是我们正在使用的布局

http://jsbin.com/sinexesaxe/1/

有没有办法用CSS实现这个目标？ 这也应该与IE8兼容。

Answer 1

不是使用实际的表，而是通过应用类来模仿它们，例如：

<div class="table">
<div class="tr">
<div class="td">
Content...
</div>

etc ...，然后将 CSS 中的“display”属性设置为HTML对应项：

.table{
display:table;
}
.tr{
display:table-row;
}
.td{
display:table-cell;
}

这样，您可以在需要时以不同方式处理表，请参阅我的示例： http://www.grafik-wunder.de/klafo/?action=userlist

或这个小提琴（更整洁，更重要）： http://jsfiddle.net/svArtist/dnbduwcj/

您可以在HTML中添加ID（如果动态创建表，则为PHP）并应用：after选择器来创建中断