html - 将表格行分成多行(响应式布局)

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

.calculator 是用于表格的类:

<table class="calculator">

我用它来快速更改我用于计算器输入的表格，以便在移动/桌面之间查看时看起来更智能的设计:live example here尽管最好通过移动设备和桌面并排查看差异(并非我所有的移动脚本都交付给桌面浏览器，因此如果您纯粹通过桌面浏览器查看并最小化，整体设计可能看起来很奇怪，但单元格会变成行等来说明)。

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

display:table-cell;

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