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

从语义上讲，将您的行分成多个并不是一个很好的选择，因为您的列将不再与它们的标题匹配。这并不意味着您被一张可怕的、 react 迟钝的 table 困住了。

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

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