{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 SAY GOODBYE 的问题《Colums resize when using JQuery UI's toggle in》','https://www.manongdao.com/q-1020356.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Example code:
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<table border="1" style="width:100%">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td colspan="4" >
<div id="target">TOGGLE TEXT!!</div>
</td>
</tr>
</table>
<input type="button" value="show/hide" onclick="toggleHidden();" />
<script type="text/javascript">
function toggleHidden() {
$('#target').toggle("blind", {}, 200, null);
}
</script>
</body>
</html>
This code hides and shows a div in a td, using JQuery UI's toggle function (same result with the show and hide functions).
In FireFox this works great, but in IE all the columns will resize during the "toggle effect". Does anyone know why IE behaves like this? And if there is anything I can do in this code to prevent it from happening?
I have faced a similar problem. Try two things:
1) Give the table an absolute width in pixels, e.g. 500px
2) Try putting a non-breaking space
in the TD containing your target div, after the div to prevent the browser from collapsing the cell when there's no content in it:<div id="target">TOGGLE TEXT!!</div> Using slideToggle instead of toggle or hide/show actually solved the problem!