table 隐藏某一个td时,显示错乱问题
1、当表格为多列的情况下，属性为”display:block”行的内容宽度仅与第一列宽度相同，也就是说无论你使colspan的属性值为多少，剩余列的空间都不进行解析。
2、同一行反复的在”display:none;”与”display:block;”两个状态间切换时，表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。
解决方法：
1、用display:table-row属性来调试，发现者FireFox下正常了(只针对单列显示,多列会出现换行情况.
如果多列建议第二个方法)，但IE是不支持改属性的，怎么办呢？用JS来做判断，然后做兼容吧。
2、另外一个很简单也很可行的方法，就是用 display:’ ’ 这个属性dispaly后面不加任何的东西，很奇怪，这样就兼容了Firefox和IE了。具体原因有待牛人分析。
此例子需先引一个jquery或者直接使用原生js，如果修改后td前后浮动或上下浮动，注意调整td内含有input的宽高
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>display隐藏显示td</title> 6 </head> 7 <body> 8 <table border="1"> 9 <tr> 10 <td>操作:</td> 11 <td> 12 <input name="zhuangtai" checked="checked" class="raddioo" val="jianli" type="radio"> 13 <lable for="radio_jl">监理</lable> 14 <input name="zhuangtai" class="raddioo" val="ducha" type="radio"> 15 <lable for="radio_dc">督查</lable> 16 </td> 17 <td id="tdtitle">目标状态:</td> 18 <td id="hiddn_choose"> 19 <input val="" type="hidden" id="mubiaoid"> 20 <input val="" type="text" readonly style="width:125px;height25px;" id="mubiaoname"> 21 <a href="#" onclick="showselect()">选择</a> 22 <a href="#" onclick="cheardt()">清空</a> 23 </td> 24 </tr> 25 </table> 26 </body> 27 </html>
1、每个html标签都有自己的默认display属性的，你把display设置成空的时候，浏览器应该是把元素给成默认的属性了，所以就兼容了所有的浏览器，可谓是无招胜有招啊！
2、不过，如果tr的display:none是在外部引入的css文件中设置的话，在ie7脚本中用display:”方法是没有用的
用了一个状态改变的方法来显示隐藏
1 <script type="text/javascript"> 2 $(".raddioo").change(function(){ 3 if($('input[name="zhuangtai"]:checked').val() == "jianli"){ 4 $("#hiddn_choose").css("display","") 5 $("#tdtitle").css("display","") 6 }else{ 7 $("#hiddn_choose").css("display","none") 8 $("#tdtitle").css("display","none") 9 } 10 }); 11 12 <script> 13
