Jquery <；TD>；及<；表>；宽度被打破了？

我有一个很奇怪的问题

小提琴：

全屏：

此代码：

<div id="workspace"> 
       <table id="leds" >
            <tbody id="leds_body">
            </tbody>
       </table>
</div>

jQuery：

var WH=10;
$(function(){
    $("#zoom-in").click(function(){
        $(".LED, .NOT_LED").width((WH+1)+"px").height((WH+1)+"px");
        WH=WH+1;
        });

    $("#zoom-out").click(function(){
        $(".LED, .NOT_LED").width((WH-1)+"px").height((WH-1)+"px");
        if (WH==5) WH=5;
        else WH=WH-1;

});
});

我想要的：放大/缩小我的表格（通过更改

大小）。
发生了什么：当我使用“放大”时，表格正“增长”，但宽度仅为656px，然后宽度保持在656px，高度仍在增长。当我在Chrome inspect中检查时，我看到表中有静态656px。我可以把它改得太高，但这不是我想要的。 如何使宽度与高度相同而不是静止

这是因为您的

#led

表默认为

宽度：100%

，因此您的

td

元素“适合”宽度。我想不出一个简单的CSS解决方案；但是，您可以在每次单击

+

或

-

符号时设置宽度：

$(function(){
    $("#zoom-in").click(function(){
        $(".LED, .NOT_LED").width(WH+1).height(WH+1);
        $('#leds').width($('#leds_body tr:eq(0) td').length * WH);
        WH=WH+1;
        });

    $("#zoom-out").click(function(){
        $(".LED, .NOT_LED").width((WH-1)+"px").height((WH-1)+"px");
        $('#leds').width($('#leds_body tr:eq(0) td').length * WH);
        if (WH==5) WH=5;
        else WH=WH-1;

});

---

它正在工作，但它使我的表格从正方形变形为矩形：/I我不能考虑其他间距元素，如边框或其他什么。在这个基础上进行计算，它应该会解决这个问题。

$(function(){
    $("#zoom-in").click(function(){
        $(".LED, .NOT_LED").width(WH+1).height(WH+1);
        $('#leds').width($('#leds_body tr:eq(0) td').length * WH);
        WH=WH+1;
        });

    $("#zoom-out").click(function(){
        $(".LED, .NOT_LED").width((WH-1)+"px").height((WH-1)+"px");
        $('#leds').width($('#leds_body tr:eq(0) td').length * WH);
        if (WH==5) WH=5;
        else WH=WH-1;

});