Biophilia
14 Jun 2009, 07:16 PM
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>
<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>
function showRow(){
var divObj = document.getElementById('hiddenrow');
if (divObj.style.display == ''){
divObj.style.display = 'none';
}else{
divObj.style.display = '';
}
}
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>
<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>
function showRow(){
var divObj = document.getElementById('hiddenrow');
if (divObj.style.display == ''){
divObj.style.display = 'none';
}else{
divObj.style.display = '';
}
}