Mootools not show colspan td in tr hidden - css

Question

I want to hide information that is in a hidden row as shown no respect colspan. I have:
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td><div id="se">click here!!</div></td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr><td colspan="3" style="display:none;;">content</td></tr>
and Mootools code
$('se').addEvent('click',function(){
this.getParent('tr').getNext('tr').getElement('td').setStyle('display','block');
});
when I click on "click here!" hidden row is shown, but not colspan.
See example here: http://jsfiddle.net/Xvnhw/1/

Answer 1

this is not to do with MooTools but browser repaint of an element that it has not considered for rendering before.
move to using a CSS based setup, which gets applied after the engine parses the cells and sets correct position.
http://jsfiddle.net/Xvnhw/3/
$('se').addEvent('click',function(){
this.getParent('tr').getNext('tr').getElement('td').removeClass('hide');
});
and css
.hide {
display: none
}
yet another example of why inline element styles are a bad thing.

Answer 2

This has nothing to do with inline styling and everything to do with the display value. The display style should be set to 'table-cell', not 'block'.
Here is the original code, with the only change being change being setting the display value to 'table-cell':
http://jsfiddle.net/L2zz3/
HTML:
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td><div id="se">click here!!</div></td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr><td colspan="3" style="display:none;;">content</td></tr>
</table>
Mootools code:
$('se').addEvent('click',function(){
this.getParent('tr').getNext('tr').getElement('td').setStyle('display','table-cell');
});
Note how this example has inline styles and still works.
Here is a CSS based setup that sets the display value to 'block':
http://jsfiddle.net/z7hXc/
HTML:
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td><div id="se">click here!!</div></td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr><td colspan="3" class="hide">content</td></tr>
</table>
Mootools code:
$('se').addEvent('click',function(){
this.getParent('tr').getNext('tr').getElement('td').removeClass('hide').addClass('show');
});
CSS:
.hide {
display:none;
}
.show {
display:block;
}
Notice how this example has the same issues as the original code, but does not use any inline styles. Therefore, this is clearly an issue with 'display':'block', and not due to inline styling.