Javascript 如果桌子太长，就把它打碎

我有一张桌子在一个固定高度的沙发里。行是水平的：

<div height="600px">
    <table>
        <tr>
            <td>
            <td>
        </tr>
        .
        .
    </table>
</div>

.
.

问题是表中的内容是动态的，所以有时表会超出div，并继续向下扩展。当行到达div的边缘时，有没有一种方法可以使行水平增长而不是垂直增长？

这在JSFIDLE中有效（不知道如何保存）

顺便说一下，您的html无效（

）

1.
2.
3.
4.

将此属性添加到您的div：

overflow:auto;

您还可以指定水平或垂直滚动，如下所示：

overflow-y:auto;
overflow-x:auto;

---

希望这对您有所帮助。

我用以下jQuery函数解决了这个问题：

$("table").each(function() {
    var tableRows = $(this).find('tr');
    if(tableRows.length > 12) {
        var firstRows = [];
        tableRows.each(function(index) {
            if(index < 12)
                firstRows.push($(this));
            else {
                var content = $(this).html();
                firstRows[index%12].append(content);
                $(this).remove();
            }
        });
    }
});

$（“表”）。每个（函数（）{
var tableRows=$（this.find（'tr'）；
如果（tableRows.length>12）{
var firstRows=[]；
tableRows.each（函数（索引）{
如果（指数<12）
firstRows.push（$（这个））；
否则{
var content=$（this.html（）；
第一行[索引%12]。追加（内容）；
$（this.remove（）；
}
});
}
});

我不这么认为，但您可以尝试

style=“overflow-y:scroll”

谢谢，但我不想让它滚动。单元格中的内容非常短，所以如果它可以水平生长，我会看起来更好10倍

$("table").each(function() {
    var tableRows = $(this).find('tr');
    if(tableRows.length > 12) {
        var firstRows = [];
        tableRows.each(function(index) {
            if(index < 12)
                firstRows.push($(this));
            else {
                var content = $(this).html();
                firstRows[index%12].append(content);
                $(this).remove();
            }
        });
    }
});