javascript - 如果超过长度，将表行拆分为多行

Question

我有一个 PHP 脚本，它返回一长行。使用它，我在这里制作了一个片段 - http://jsfiddle.net/MLZEb/6/

你能帮我将行分成多行而不是使用水平滚动条( http://jsfiddle.net/MLZEb/ )吗？

目前我正在使用自动换行，这使得它无法阅读。

td
{
word-wrap: break-word;
}
table
{
width:100%;
table-layout:fixed;
}

Answer 1

从语义上讲，将行分成多个行并不是一个好的选择，因为您的列将不再与其标题匹配。这并不意味着您被困在一个可怕的、无响应的表中。

使表格适合狭窄(移动)设备非常容易，并且需要最少的标记更改:

http://jsfiddle.net/MLZEb/9/

tbody, tr, th, td { display: block }
thead { display: none }
td:before {
    content: attr(data-label);
    display: inline-block;
    width: 6em;
    padding-right: 1em;
    vertical-align: middle;
}

td:first-child {
    background: #CCC;
}

您需要将 data-label 属性添加到您的 td 中才能使其正常工作:

<td data-label="ID">49251</td>

如果您想在更宽的视口(viewport)中水平填充更多内容，您可以在某些列上使用 float (请注意，一些单元格已重新排列，以便它们布局更好):

http://jsfiddle.net/MLZEb/10/

table, tbody, tr, th, td { display: block; border: none }
thead { display: none }
td:before {
    content: attr(data-label);
    display: inline-block;
    width: 5em;
    padding-right: 1em;
    vertical-align: middle;
}

td.attrib { /* add this class to any cell that should appear on the left */
    float: left;
    clear: left;
    width: 15em;
}