Question

我有一个非常奇怪的问题。

全屏：http://jsfiddle.net/H3W4X/embedded/result/

此代码：

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

CSS：

#workspace{
position:absolute;
left:200px;
width:760px;
height:600px;
background:#0FF;
float:left;
overflow-x: auto;
overflow-y: auto;
background-image: url("bg.png");
background-repeat: repeat-x;
}

#leds
{    
position:relative;
left:10px;
margin-top: 50px;
margin-left:50px;
margin-right:50px;
border-collapse: collapse;
border: 2px solid black;
}

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;

});
});

我想要的：放大/缩小我的桌子（通过更改<td>尺寸）发生了什么：当我使用放大表时，正在“成长”。对，但只有656px的宽度，然后宽度保持在656px，高度仍在增长。当我在Chrome中检查这个时，我看到该表有静态656px。我可以把它改得太高但不是我想要的。如何使宽度与高度相同而不是静态？

Answer 1

这是因为您的#leds表默认为width: 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;

});

http://jsfiddle.net/H3W4X/3

http://jsfiddle.net/H3W4X/3/embedded/result/

和宽度被打破？<table> </table>

1 个答案: