Hi, I've got a couple issues with html tables. I tried to simplify the code as much as possible to make it easier for you guys.

It's just a two row table with the second being hidden. You can show/hide that row with a button in the first row.

1) When you show and hide the second row you can see a minor shift in the column in firefox, a dramatic shift in the column in IE, and no shift for chrome.

2) When I add table-layout: fixed; to the table style then there is no shift in chrome, no shift in IE, but firefox still has a minor shift plus a small space on the right side of the table.

ultimately I want no shift in any browser and I need the layout for the table to be fixed.

all 3 browsers are updated to the most recent version. If anyone could help me out that would be great. I've been going nuts over this for 2 days.

HTML Code:
<html>
<head>
	<script type="text/javascript" src="show_row.js" defer="defer"></script>

        <style type="text/css">
                <!--
		table { 
			width: 1000px;
		}
		-->
	</style>
</head>
<body>
<table border="1" style="width:500px;">
<col style="width:25%;"></col> 
<col style="width:25%;"></col> 
<col style="width:50%;"></col>

<tr>
	<td colspan="2">c1</td>
	<td><input type="button" onclick="showRow()" value="button" /></td>
</tr>

<tbody id="hiddenrow" style="display:none">
<tr>
	<td>c3</td>
	<td>c4</td>
	<td>c5</td>
</tr>
</tbody>

</table>
</body>
</html>
Code:
function showRow(){
	var divObj = document.getElementById('hiddenrow');
	if (divObj.style.display == ''){
		divObj.style.display = 'none';
	}else{
		divObj.style.display = '';
	}
}