If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

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).

Users who have thanked VIPStephan for this post:

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