0

レスポンシブ デザインを念頭に置いて、Sharepoint を介して xx ユーザーが作成したテーブルを変更しようとしています。私がやりたいことは、画面の幅に基づいて、テーブルの最後の表示列を繰り返し非表示にすることです。

例: ユーザーが 10 列のテーブルを作成し、最大画面サイズは 1200 です。ウィンドウを 600px に最小化すると、最後の 5 列は表示されません。ウィンドウを 800px に最小化すると、最後の 3 列は表示されません。

現在、:nth-child で display:none を使用して CSS で列を選択的に削除できますが、n-1-child に移動するためにディスプレイが既に none に設定されているかどうかは考慮されていません。

CSSでこれを行う方法はありますか、それともこの概念はJavascriptに限定されていますか? もしそうなら、どのように？

ありがとうございました。

4

1 に答える 1

0

http://jsfiddle.net/tcvB6/1/ ここに 1 つの可能性があります。画面サイズが変更された場合に継続的に更新するように設定しませんでしたが、それを追加することはできます。CSS を支援するためにテーブルをいくつかの div でラップし、次の関数を追加しました。

$("table").each(function(){
    var $table = $(this);
    while ($table.outerWidth() > $("#wrapOuter").outerWidth()) {
        $table.find("tr").each(function(){
            $(this).find("td:visible, th:visible").last().hide();
        });
    }
});
于 2013-09-06T19:58:44.953 に答える