将表格行分成多行（响应式布局）

Question

我有一个列出项目的网页。默认模板为此使用了一个表格，我认为这非常合适。然而，在此表中，有一列包含的文本比其他列多得多：

虽然这在大屏幕上可行，但在小屏幕上阅读却很烦人：

为了更好地利用可用空间，我只能想到使用div的假表格布局。我做了一个原型，使用 bootstrap 网格布局，在大屏幕上看起来像表格行，但在小屏幕和超小屏幕上有不同的布局：

虽然这通过使用全宽提高了文本的可读性，但我不能再使用我为表格提供的实用程序，并且它以微妙的方式破坏了用户体验。例如，我使用了一个很好的脚本，可以在客户端进行排序。但这只适用于真实的桌子。 （此外，真表和假表之间存在细微的不一致和视觉差异）

有什么方法可以将表格行重新格式化为类似于上一张图片中的多行容器？

仅供参考：我在服务器上使用 jquery 2.1.1、Bootstrap 3.2.0.1 作为 GUI 框架和 asp.net MVC。

Bootply 在这里：http: //www.bootply.com/pRehwTai4G

编辑：如果结果不够清楚：我想保留 <tr> 和 <td> 标签，但它们的样式类似于 div。我不想用 div 替换表格。

原文由 DasKrümelmonster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以查看 响应式数据表。如果这不符合您的需要，您可以使用 JavaScript 将您的表视图重新创建为 div。如果您可以获得 JSON 格式的表数据，这将是最简单的，这将根据分辨率转换为表或 div。如果你不能将它作为 JSON，你总是可以使用 jQuery 的 html() 或 text() 从表格单元格中获取数据并重新绘制到 div 中。

原文由 Maciej Gurban 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以纯粹用几行 css 来做到这一点……

     @media all and (max-width:768px) {
        .calculator tr {    display: table;  width:100%;    }
        .calculator td {    display: table-row; }
    }

.calculator 是用于表的类：

 <table class="calculator">

我用它来快速改变我用于计算器输入的表格，以便在移动/桌面之间查看时看起来更智能的设计： 这里的现场示例 虽然差异最好通过移动设备和桌面一起查看（不是我所有的移动脚本交付给桌面浏览器，因此如果您纯粹通过桌面浏览器查看并最小化，整体设计可能看起来很奇怪，但单元格将变成行等来说明）。

此外，您可以在单元格内添加一个跨度/标签等，并制作它

display:table-cell;

如果您愿意，可以将表做成一个块，这种方法更加轻量级并且不再需要使用 javascript。

原文由 Pete - iCalculator 发布，翻译遵循 CC BY-SA 3.0 许可协议