Hide div inside table

[Tymncurry]

I am trying to hide \[code\]div 2\[/code\] and \[code\]div 3\[/code\]. But it is not working.it works only after I pull the div out of the table. Can anyone explain to me why?Script\[code\]<script> $(document).ready(function(){ $("#2").hide(); $("#3").hide(); });</script>\[/code\]HTML\[code\] <div align="center"> <table width="10%" border="0" cellspacing="0" cellpadding="0"> <tr> <th scope="row"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <div id = "1"> <th><input type = "button" value = "http://stackoverflow.com/questions/12796993/1.1" ></th> <th><input type = "button" value = "http://stackoverflow.com/questions/12796993/1.2" ></th> <th><input type = "button" value = "http://stackoverflow.com/questions/12796993/1.3" ></th> </div> <div id = "2"> <th><input type = "button" value = "http://stackoverflow.com/questions/12796993/2.1" ></th> <th><input type = "button" value = "http://stackoverflow.com/questions/12796993/2.2" ></th> <th><input type = "text" value = "http://stackoverflow.com/questions/12796993/2.3" ></th> </div> <div id = "3"> <th><input type = "button" value = "http://stackoverflow.com/questions/12796993/3.1" ></th> <th><input type = "button" value = "http://stackoverflow.com/questions/12796993/3.2" ></th> </div> </tr> </table></th> </tr> </table></div>\[/code\]