css - Mootools not show colspan td in tr hidden -


i want hide information in hidden row shown no respect colspan. 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 click on "click here!" hidden row shown, not colspan.

see example here: http://jsfiddle.net/xvnhw/1/

this not mootools browser repaint of element has not considered rendering before.

move using css based setup, gets applied after engine parses cells , 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 example of why inline element styles bad thing.


Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -