Question

我在一个设有高度的div里面有一张桌子。行是水平的：

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

问题是表中的内容是动态的，因此有时表格会超过div并继续向下延伸。有没有办法让行一旦到达div的边缘就水平增长而不是垂直？

Answer 1

将此属性添加到div：

overflow:auto;

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

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

希望这对你有所帮助。

Answer 2

这适用于jsfiddle（无法弄清楚如何保存）http://jsfiddle.net/

顺便说一句，你有无效的html（<th><td>）

<div style="height:30px; background-color:red; overflow-y:scroll">
    <table>
        <tr>
            <th>1</th>
        </tr>
        <tr>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
        </tr>
    </table>
</div>

Answer 3

我用以下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();
            }
        });
    }
});

如果时间过长会破桌子

3 个答案: