在调整页面大小时，使用jQuery移动列以便下一个

目前我正在网站上列出这样的信息：

td1 td2 td3 td4
td5 td6 td7 td8

当调整浏览器的大小，第4和第8个td现在被切断时，我希望这样：

td1 td2 td3
td4 td5 td6
td7 td8

……最后，如果你继续前进，它会显示如下：

TD1
TD2
TD3
TD4
等等

有谁知道如何让列向下移动到下一个tr并将前一列推到一个？

Answer 1

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

我快速写了一些东西。 你可以在这里查看

http://jsfiddle.net/M2JBS/37/

它确实需要更多的工作，但是如果你真的需要使用表格，那么我猜…

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

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

HTML

  
 
 
 
test 1
 
test 2
 
test 3
 
 
 
test 4
 
test 5
 
test 6
 
 
 
test 7
 
test 8
 
test 9
 
 
 
test 10
 
test 11
 
test 12
 
 
 
test 13
 
test 14
 
test 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 = $(''); var row = ''; $.each(nt, function(row, cols) { var row = ''; for (i in cols) { row += ''; } $table.append(row + ''); }); $table.append('
' + $(cols[i]).html() + '
'); $('#tableContainer').empty(); $table.appendTo('#tableContainer'); } customizeTables();​