3

現在、私はウェブサイトで次のような情報をレイアウトしています。

td1 td2 td3 td4
td5 td6 td7 td8

ブラウザのサイズを変更して 4 番目と 8 番目の td が切り取られた場合、次のようにしたいと思います。

td1 td2 td3
td4 td5 td6
td7 td8

...そして最終的に、このまま進めていくと、次のようになります。

td1
td2
td3
td4
など

列を次の tr に移動させ、前の列を 1 つにプッシュする方法を知っている人はいますか?

4

1 に答える 1

3

そのようなことは聞いたことがありません。そんなことをするのはちょっとばかげています。

急いで何か書きました。ここで確認できます

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

より多くの作業が必要ですが、本当にテーブルを使用する必要がある場合は、それから始めると思います...

テーブルに適用されるクラスを考慮し、幅を再計算して、ページに再度配置する必要があります。また、それらをテーブル自体に合わせる必要があります。

テーブルからすべての TD を取得し、そこから div を作成する方が簡単です。

HTML

 <div id="tableContainer">
    <table class="destroy" border="1">
        <tr>
            <td>test 1</td>
            <td>test 2</td>
            <td>test 3</td>
        </tr>
        <tr>
            <td>test 4</td>
            <td>test 5</td>
            <td>test 6</td>
        </tr>
        <tr>
            <td>test 7</td>
            <td>test 8</td>
            <td>test 9</td>
        </tr>
        <tr>
            <td>test 10</td>
            <td>test 11</td>
            <td>test 12</td>
        </tr>
        <tr>
            <td>test 13</td>
            <td>test 14</td>
            <td>test 15</td>
        </tr>
    </table>
</div>

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();​
于 2012-12-10T01:01:33.390 に答える