9

販売中のアイテムを表示する、複数の行を持つテーブルがあります。ユーザーが行をクリックすると、Javascript がアイテムの詳細を含む新しい行をそのすぐ下に挿入/表示します。問題は、説明が長い場合、列幅の再調整/サイズ変更が強制されることです。これは列の位置をずらし、特にユーザーにとっては非常に煩わしいものです。現在、table.style.tableLayout: auto があります。列がコンテンツに合わせて調整されるため、実際にはこの方法が好きです。

私の質問は、新しい行を挿入/表示するときに列が再調整/サイズ変更されないように、テーブルの列の幅を動的に「ロック」するにはどうすればよいですか?

私はもう試した：

  1. テーブルを動的に一時的に「tableLayout: fixed」に設定する
  2. 新しい行を挿入/表示する
  3. テーブルを「tableLayout: auto」に戻す

アクション 1 と 2 は FireFox では機能しますが、Safari と IE (6 と 7) では機能しません。ただし、3 つすべてを実行すると、列が大きく移動するのを防ぐことができます。

欲求不満がたまらない...たくさんの睡眠を失う...助けてください！

ありがとう。

4

5 に答える 5

5

コードを探している人向け (これは jQuery で行われます)。これは、最初の行が各セルに対して適切な幅を持っていることも前提としています。必要に応じて簡単に変更できます。

$('table.class_of_table_to_fix tr:first td').each(function() {
   $(this).css({'width': $(this).width()+"px"});
});
于 2011-04-13T21:44:16.427 に答える
1

切り替え可能なグループを含むテーブルを実装していたときに、同様の問題が発生しました。列の幅を固定せずに、列間の初期比率を同じままにしたかったのです。デフォルトでは、ブラウザーはテーブルの行の可視性に応じて幅を変更しますが、これは望ましくありません。

私は先に進み、パーセンテージを適用するという@faBの提案に従いましたが、th要素のパーセンテージを計算し、最初のレンダリング後にそれらを適用する小さなスクリプトを使用してそうしました。これにより、すべての行が非表示になっていても、列が同じ幅のままになりました。

jQuery を使用するスクリプトは次のとおりです。

(function($){

    var lock_widths = function() {
        var total_width = $('table').innerWidth();
        var headers = $('table th');
        var leftover = 100;

        $.each(headers, function(ix, el) {
            var header = $(el), width;

            // on the last call use the leftover percentage
            if (ix == headers.length - 1) {
                width = leftover;
            } else {
                leftover -= width = header.outerWidth() / total_width * 100; 
            }

            header.css({'width': width + '%'});
        });
    };

    $(document).ready(lock_widths);

})(jQuery);

IE7+、Firefox、Chrome でテスト済み。これは、参照としてヘッダー列があるため、私の特別なケースで機能しますが、他の列を測定するように書き直すことができます。

于 2012-02-09T14:00:13.840 に答える
1

ガイドとして、各列にパーセント幅を設定します。各列の TH に一度だけ設定します。ブラウザーは必要に応じて列をコンテンツに合わせて調整しますが、列はより一貫して配置されます。

次に、そのテーブルのどこにも css "white-space:nowrap" を配置しません。長い説明はテーブルのレイアウトを壊してはならず、複数の行で適切に折り返され、データの種類に合わせて各列の幅を設定した場合に読みやすいものにする必要があります。同様に、日付、時刻、数字に (改行不可のスペース) を使用し続け、テキストを折り返すことができるようにします。

それ以外では、私は日常的にこれを仕事で行っており、ブラウザーに意図されていないことを実行するように要求することをやめさせる必要がある場合があります。コンテンツは流れて適応する必要があります。列幅をピクセルにロックすることは、99.99999% の確率で悪い考えです。

PS: 本当に、本当に、本当に列をロックする必要がある場合、私が知っている唯一の解決策は、CSS2 で動作し、すべてのブラウザーで画像を使用することです。各列に高さ 1px の透明な gif 画像を挿入し、セルのパディング (TD) をカウントして、列 (TH/TD) の代わりに各画像 (IMG) にピクセル幅を設定できます。たとえば、TH でそれらを非表示にすることができます。画像を 1 ピクセル幅のままにして、TD にパーセント幅を設定できます。新しい行を開くと、各列の幅から TD パディングを引いた値を取得し、それを対応する IMG に設定します。私は試していません！私が取り組んできた多くのプロジェクトでは、小さな gif 画像を使用して、たとえば、列間の垂直方向の最小間隔をロックしていたことを知っています。

于 2009-02-12T23:06:36.290 に答える
0

クリックした行の下の行の詳細を DIV で表示し、その行を設定できます。

style="overflow:auto";

詳細が折り返され、スクロールバーがテキスト全体を表示できるようになります。

于 2009-02-12T07:51:19.173 に答える
0

あなたがjqueryに精通しているかどうかはわかりませんが、それは私が使用するものです-新しい行のサイズ変更を引き起こす列の別のクラスと組み合わせて-

  1. 列の with を計算/取得する
  2. 前述のクラスの with を設定します
  3. 行を追加

私はそれを試していませんが、それでうまくいくはずです。

ところで、おそらく他の方法もあると思いますが、私は jquery に慣れているだけです (ポイント 1. と 2. について)。

于 2009-02-12T14:27:00.360 に答える