动态表格宽度

Posted 2023-03-06

【中文标题】动态表格宽度

【英文标题】：Dynamic Table Width

【发布时间】：2013-05-24 20:06:22

【问题描述】：

我有一个表格单元格，其中显示了其他表格（带有背景颜色）。内表并不总是显示；它们可以通过按钮隐藏（使用 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%

【问题讨论】：

你可以使用 javascript。

他会用JavaScript吗？很高兴知道..

好吧，由于表格单元格会根据内容自行调整，因此根据定义，其内容的总宽度为 100%。问题解决了。

【参考方案1】：

要更改元素的宽度，您可以使用 jquery。

Here's the page explaining how.

【参考方案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”。

（希望我回答了你的问题）

【讨论】：

$(".show").length 的解决方案对我来说似乎是最好的。但是当我尝试 $(".event.show").length 时，我得到 0（即使所有表都有类“event show”）

$(".event .show").length 应该与“event show”类一起使用。也许你忘记了一个空格。

在我的代码中将函数放置在错误的位置。现在一切正常，非常感谢！

【参考方案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();
);