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的 s 才能使其工作：

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

如果您想为更宽的视口填充更多水平，您可以在某些列上使用浮动（请注意，一些单元格已重新排列，以便它们布局更好）：

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

Answer 2

好吧，您可以完全忽略行并让表格单元格浮动：

table { width: 400px; }
td
{
    float: left;
    margin-left: 5px;
}

更新了小提琴。