<TD>和<table>寬度是否被破壞？

全屏：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; 

}); 
});

我想要什麼：放大/縮小我的表格（通過改變大小）。發生了什麼事情：當我使用放大表是'正在增長'的權利，但只有656px寬度，然後寬度停留在656px和高度仍在增長。當我在Chrome中檢查了這一點，檢查我看到該表格有靜態656px。我可以改變它太高，但它不是我想要的。如何使寬度與高度相同？不是靜態的。

來源

2014-07-25 snuuve

A [小提琴]（http://jsfiddle.net/）會好！ –

http://jsfiddle.net/H3W4X/這裏是小提琴。 – snuuve

我知道它爲什麼會發生。找到一個工作解決方案... –

這是因爲您的#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/

來源

2014-07-26 00:36:13

它的工作，但它使我的桌子從正方形變爲矩形：/ – snuuve

我不能考慮像邊界或什麼的其他間距元素。基於這一點進行計算並且應該修復它。 –

http://jsfiddle.net/H3W4X/4/ –

<TD>和<table>寬度是否被破壞？

回答

相關問題