Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    2 table problems. Both have to do with column shifting.

    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.

    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 = '';
    	}
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    OK, before I say anything about the column shift I’ll tell you that you have to use a doctype before you can expect browsers to behave the same way. Without such browsers switch to quirks mode (because you don’t tell them what kind of language you are using) and each browser is guessing what you could have meant (and they guess differently). Since you are using some XHTML style syntax I’d usggest you use an XHTML strict doctype.

    Now, since the strict rules for XHTML apply there are certain attributes that aren’t allowed, such as the defer and the border attributes. For the JS you should use window.onload to execute a script only after the complete document has finished loading (or use brothercake’s DOM ready script). The border should be applied through CSS only.

    Also you should use <thead> for your header row if you’re using <tbody> already. You don’t need to use rowgroups anyway, you could as well just hide and show that row directly (i. e. <tr id="hiddenrow" …>).

    Now to your actual problem. At first let me tell you what happens and why it happens:

    This is a typical cross-browser issue where different browsers have a different default behavior. Not all of them are right or wrong but sometimes there just aren’t clear official specifications on how a browser should behave so the implementations are different. In Firefox the small shift occurs due to the border spacing (a. k. a. cell spacing) of the two left cells. The topmost row has a column group and the bottom row has two separate cells. The result is that in the bottom row the space between those cells counts towards the column width, and if it’s hidden it doesn’t because the top row has no space there. You can solve this issue by removing the cell spacing (e. g. with border-collapse: collapse; applied to the table).

    The column width issue in IE has a similar background: You have specified three columns in the table markup. However, IE wrongly counts the two merged cells/columns as one only if the separate bottom cells are hidden, and it applies a width of 25% to those merged cells (where it actually should add both to 50%).
    One solution to this is to remove the 25% width and only specify a 50% width for the last column. This could, however, lead to different widths in the first two cells in the bottom column if the content is different. You can overcome this by setting the width to the cells directly rather than to the columns. I’ve attached an example code (I’ve also made the JS more unobtrusive and the entire page is using progressive enhancement).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
    function showRow() {
    	var button = document.getElementById('button');
    	var divObj = document.getElementById('hiddenrow');
    	divObj.style.display = "none";
    	button.onclick = function() {
    		if (divObj.style.display == ''){
    		divObj.style.display = 'none';
    		}else{
    		divObj.style.display = '';
    		}
    	}
    }
    window.onload = function() {
    	showRow();
    	// add more functions here if applicable
    }
    </script>
    <style type="text/css">
    table { 
    	width: 500px;
    	border-collapse: collapse;
    	border: 1px solid #CCC;
    }
    th, td {
    	border: 1px solid #CCC;
    	text-align: left;
    }
    tbody td {width: 25%;}
    colgroup.last {width: 50%;}
    </style>
    </head>
    <body>
    <table>
    	<colgroup span="2">
    		<col></col>
    		<col></col>
    	</colgroup>
    	<colgroup class="last">
    		<col></col>
    	</colgroup>
    	<thead>
    	<tr>
    		<th colspan="2">c1</th>
    		<th><input type="button" id="button" value="button" /></th>
    	</tr>
    	</thead>
    	<tbody id="hiddenrow">
    	<tr>
    		<td>c3</td>
    		<td>c4</td>
    		<td>c5</td>
    	</tr>
    	</tbody>
    </table>
    </body>
    </html>

  • Users who have thanked VIPStephan for this post:

    Biophilia (06-15-2009)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I wasn't using a doctype so I'll be sure to do that now. The rest of your advice is extremely helpful too. I understand now why those shifts were occuring. It would make more sense in my opinion if the browsers took hidden rows into account, but maybe its an oversight rather than a design implementation. Or maybe there is other reasoning that I'm just not aware of right now.

    I'm a web development newbie but I'm very motivated to learn and to do things right so your effort is much appreciated. Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •