Динамическая ширина таблицы

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.

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 2

Чтобы изменить ширину ваших элементов, которые вы можете использовать JQuery.

Here's the page explaining how.

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(); 
});