javascript - 動的テーブル幅

Question

他のテーブルが表示されるテーブル セルがあります (背景色付き)。内部テーブルは常に表示されるわけではありません。ボタンで非表示にすることができます (jQuery でクラスを変更します)。ここで、外側のセルを常に色で塗りつぶしたいと考えています。つまり、テーブルが 1 つだけ表示されている場合、その幅は 100% である必要があります。2 つ表示する場合は、それぞれの幅を 50% にする必要があります。これをどのように解決すればよいですか？

次に例を示します。

... 
<td>
<table class="show"><tr><td></td></tr></table>
<table class=""><tr><td></td></tr></table>
<table class="show"><tr><td></td></tr></table>
</td>
...

この場合、幅は 50% にする必要があります。

Answer 1

要素の幅を変更するには、jquery を使用できます。

やり方を解説しているページです。

Answer 2

ここに別の方法があります：http://jsfiddle.net/ypJDz/1

必要なものには少し複雑すぎますが、拡張する可能性は大いにあります。

function resizeTables() {
    var baby = $("td > table.show"),
        amount = baby.length,
        mother = $("body");

    baby.width(function () {
        var w = mother.width() / amount;
        return w;
    });
}

resizeTables();

$("button").click(function () {
    var $this = $(this),
        ID = $this.index() + 1;

    $("td > table:nth-child(" + ID + ")").toggleClass("show");
    resizeTables();
});