I've encountered a peculiar issue that I need help with.
Here is the Fiddle link: http://jsfiddle.net/H3W4X/
If you want to view it in fullscreen: http://jsfiddle.net/H3W4X/embedded/result/
This is the code snippet causing trouble:
<div id="workspace">
<table id="leds" >
<tbody id="leds_body">
</tbody>
</table>
</div>
Here's the CSS associated with this code:
#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;
}
And adding jQuery behavior to it:
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;
});
});
My goal is to be able to zoom in/out of my table by adjusting the size of <td>. However, when I try to zoom in, the table grows on the width only up to 656px, then the width remains static while the height continues to grow. Upon inspecting this behavior in Chrome, I noticed that the table has a fixed width of 656px. How can I make sure both width and height adjust accordingly without being constrained to a specific value?