具有不同布局选项的响应式 table

Question

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

这是我们使用的布局

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

Answer 1

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

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

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

或这个 Fiddle （更整洁和切题）： http://jsfiddle.net/svArtist/dnbduwcj/

您可以在 HTML（或 PHP 中添加 ID，如果 table 是动态创建的）并应用 :after 选择器来创建中断

Responsive table with different layout options