tableにjQueryのtoggleを使うと幅が100%に広がらない件

jQueryのtoggle(“slow”)やslideToggle(“normal”)など、アニメーションしながら要素を表示させる機能は非常に重宝しますが、これをTABLEタグに対して適用すると、ちょっとした不具合が起こります。　今回はこれをなんとか解決してみます。

テーブルの幅が100%になってくれない！？

IE以外のブラウザで起こる問題なのですが、テーブルの幅を100%にしていても、toggleやslideToggleでアニメーション表示させると幅が100%になってくれません。

このバグはjQuery 1.3.2での再現性を確認していますが、1.5.2以降ではすでに解決されています。　jQueryをバージョンアップできる環境にある場合は、バージョンアップしてしまったほうが近道です。

表示がおかしくなる例（Chrome, Safari, Firefoxにて確認）

アニメーション表示後に「display:block」に？

この不具合が起こってしまう原因ですが、jQueryのtoggleやslideToggleなどを使って表示すると、これまで「display:table」だったものが「display:block」に変更されてしまうためです。

コールバック関数で再び「display:table」にしよう

ということで、解決方法は再び「display:table」に戻してあげることです。　これを実現させるためには、toggleなどでアニメーション表示が完了した後に実行されるコールバック関数を指定し、その中で「display:table」に変更してあげることです。

$("#sample2").toggle("normal",function(){
    if ($(this).css("display")=="block") {
        $(this).css("display","table");
    }
});

で、改良したものがこちら。　最後に若干なめらかにならない部分はありますが、ちゃんと100%表示が効いているのが確認できます。

ポイント

コールバック関数の中で無条件に「display:table」してしまうと、非表示の場合にも効いてしまうため、事前に非表示になっているかどうかをif文で確認します。　ブラウザ互換を考えるのであれば、「if ($(this).css(“display”)==”block”) 」で確認するのが良いでしょう。