使用jQuery将列移动到下一个<；tr>；调整页面大小时

目前，我正在网站上发布类似的信息：

td1 td2 td3 td4
td5 td6 td7 td8

当调整浏览器大小时，第四个和第八个td现在被切断，我希望发生以下情况：

td1 td2 td3
td4 td5 td6
td7 td8

。。。最后，如果你继续，它会像这样：

td1
td2
td3
td4
等

---

有人知道我如何让这些列向下移动到下一个tr并将前一列推到另一个tr上吗？

我从来没有听说过这样的事情，这样做有点傻

我写得很快。你可以在这里查一下

它确实需要更多的工作，但如果你真的需要使用表格，我想这是一个开始

您必须考虑应用于表的类，重新计算宽度并将其重新放回页面。此外，您还需要使它们适合桌子本身

从表中提取所有TDs并从中创建div会更容易。

HTML

测试1
测试2
测试3
测试4
测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12
测试13
测试14
测试15

​ ​ Javascript:

window.onresize = function() {
    customizeTables()
};

function customizeTables() {
    // new table
    var nt = new Array();
    // current table tds
    var elements = new Object();
    // table parent width
    var wrap = $('table').parent().width();
    // current generated width
    var ct = 0;
    var fw = 0;
    // col of new table
    var col = new Array();

    $('table.destroy td').each(function(index, ob) {

        fw = $(ob).width() + 2; //borders
        fw += parseFloat($(ob).css('padding-left').replace("px", ""));
        fw += parseFloat($(ob).css('padding-right').replace("px", ""));
        fw += parseFloat($(ob).css('margin-left').replace("px", ""));
        fw += parseFloat($(ob).css('margin-right').replace("px", ""));

        if ((ct + fw) <= wrap) {

            ct += fw;
        } else {

            nt.push(col);
            ct = fw;
            col = [];
        }

        col.push(ob);
        // all elements (all tds)
        elements[index] = ob;
    });
    nt.push(col);

    var $table = $('<table class="destroy" border="1">');
    var row = '';

    $.each(nt, function(row, cols) {

        var row = '<tr>';

        for (i in cols) {
            row += '<td>' + $(cols[i]).html() + '</td>';
        }

        $table.append(row + '</tr>');

    });

    $table.append('</table>');
    $('#tableContainer').empty();
    $table.appendTo('#tableContainer');
}
customizeTables();​

window.onresize=function（）{
自定义项（）
};
函数customizeTables（）{
//新桌子
var nt=新数组（）；
//当前表tds
var元素=新对象（）；
//表父宽度
var wrap=$（'table'）.parent（）.width（）；
//电流产生宽度
var-ct=0；
var-fw=0；
//新桌子的颜色
var col=新数组（）；
$（'table.td'）。每个（函数（索引，ob）{
fw=$（ob）.width（）+2；//边框
fw+=parseFloat（$（ob）.css（'padding-left'）.replace（'px'，'）；
fw+=parseFloat（$（ob）.css（'padding-right'）.replace（'px'，'）；
fw+=parseFloat（$（ob）.css（'margin-left'）.replace（'px'，'）；
fw+=parseFloat（$（ob）.css（'margin-right'）.replace（'px'，'）；
如果（（ct+fw）使用
div
，而不是
table
。。谢谢，我意识到div是有效的，但我想问我是否可以用tables来实现。为什么一定要使用
table
。
div
在大多数情况下都应该有效。你可能可以使用javascript来实现这一点，但
div
不会更容易吗？没有本机方法可以实现强制td跳转到另一行。我同意
div
s可以工作，而且会更容易，但该站点已经在
表中编码了，我想知道是否可以不重写。如果不可以，请回答，我将作为最佳答案回答：）
window.onresize = function() {
    customizeTables()
};

function customizeTables() {
    // new table
    var nt = new Array();
    // current table tds
    var elements = new Object();
    // table parent width
    var wrap = $('table').parent().width();
    // current generated width
    var ct = 0;
    var fw = 0;
    // col of new table
    var col = new Array();

    $('table.destroy td').each(function(index, ob) {

        fw = $(ob).width() + 2; //borders
        fw += parseFloat($(ob).css('padding-left').replace("px", ""));
        fw += parseFloat($(ob).css('padding-right').replace("px", ""));
        fw += parseFloat($(ob).css('margin-left').replace("px", ""));
        fw += parseFloat($(ob).css('margin-right').replace("px", ""));

        if ((ct + fw) <= wrap) {

            ct += fw;
        } else {

            nt.push(col);
            ct = fw;
            col = [];
        }

        col.push(ob);
        // all elements (all tds)
        elements[index] = ob;
    });
    nt.push(col);

    var $table = $('<table class="destroy" border="1">');
    var row = '';

    $.each(nt, function(row, cols) {

        var row = '<tr>';

        for (i in cols) {
            row += '<td>' + $(cols[i]).html() + '</td>';
        }

        $table.append(row + '</tr>');

    });

    $table.append('</table>');
    $('#tableContainer').empty();
    $table.appendTo('#tableContainer');
}
customizeTables();​