jquery - 具有不同布局选项的响应表

Question

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

这是我们正在使用的布局

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

有没有办法使用 CSS 实现此目的？ 这也应该与 IE8 兼容。

Answer 1

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

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

等等...，然后将 CSS 中的“display”属性设置为其对应的 HTML:

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

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

或者这个 Fiddle(更简洁，更切题): http://jsfiddle.net/svArtist/dnbduwcj/

您可以在 HTML 中添加 ID(如果表是动态创建的，则可以在 PHP 中添加)并应用 :after 选择器来创建中断