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?