動態表格寬度

Question

我有一個表格單元格，其中顯示其他表格（帶有背景色）。 內部表並不總是顯示； 它們可以通過按鈕隱藏（使用jQuery更改類）。 現在，我希望外部單元始終充滿顏色。 這意味着如果僅顯示一張表格，則其寬​​度應為100％。 當顯示兩個時，每個寬度應為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

您可以使用Jquery更改寬度值。

var count_table = $(".show").length;         // count ".show" elements

$(".show").each(function{                    // iteration on each ".show"
    var width = 100/count_table;             // % value of new width
    $(this).css("width", width+"%");         // CSS modification
});

該代碼僅適用於一個TD元素。 您還需要迭代每個“ td”。

（希望我能回答你的問題）

Answer 3

這是另一種方式： 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();
});