[英]Dynamic Table Width
I have a table cell in which other tables are displayed (with background colors). 我有一个表格单元格,其中显示其他表格(带有背景色)。 The inner tables aren't always shown; 内部表并不总是显示; they can be hidden via a button (change class with jQuery). 它们可以通过按钮隐藏(使用jQuery更改类)。 Now I want the outer cell to always be filled with color. 现在,我希望外部单元始终充满颜色。 That means if only one table is displayed, its width should be 100%. 这意味着如果仅显示一张表格,则其宽度应为100%。 When two are displayed, each width should be 50%, and so on. 当显示两个时,每个宽度应为50%,依此类推。 How am I supposed to solve this? 我应该如何解决呢?
Here's an example: 这是一个例子:
...
<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>
...
In this case, the width should be 50% 在这种情况下,宽度应为50%
To change the width of your elements you can use jquery. 要更改元素的宽度,可以使用jquery。
You can change the width value with Jquery. 您可以使用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
});
This code is just adapted for one TD element. 该代码仅适用于一个TD元素。 You need to iterate on each "td" too. 您还需要迭代每个“ td”。
(I hope I answered your problem) (希望我能回答你的问题)
Here is another way: http://jsfiddle.net/ypJDz/1 这是另一种方式: http : //jsfiddle.net/ypJDz/1
A bit too complicated for what you need, but a great deal of possibility to expand. 太复杂了,无法满足您的需求,但是有很大的扩展空间。
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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.