如果超出长度，则将表行拆分为多行

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>

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

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

Updated fiddle