Mauvaise réaction colspan avec javascript

Bonjour,

J'ai un problème avec un tableau, j'essaye de faire faire apparaître / disparaître une partie du tableau lorsqu'on appuie sur un bouton plus ou moins mais lorsque le td apparaît l'option colspan que j'ai mit dessus à disparu. C'est à dire que j'avais mit un <td colspan="3"> mais lorsqu'il se déroule, on dirait qu'il n'a que 1 comme valeur du colspan. Pourtant je l'ai testé avec du javascript et il m'affiche comme valeur 3.

css :

.categ {
	border: 1px solid #000000;
	width  : 100%;
	border-collapse : collapse;
}

.title {
	background-color : #000000;
	font-weight: bold;
	color : #FFFFFF;
}

.invisible {
	display : none;
}

.deroule {
	width : 5%;
	background-color : #000000;
	color : #FFFFFF;
}

.actio {
	width : 15%;
	background-color : #000000;
}

js :

function show(x) {
	document.getElementById(x).style.display = 'block';
}

function hide(x) {
	document.getElementById(x).style.display = 'none';
}
function eThis(e) {
	return document.getElementById(e);
}

xhtml :

<table class="categ">
	<tr>
		<td class="deroule">
			<a href="#" id="pe" onclick="show('me'); show('int'); hide('pe'); eThis('int').colSpan = 3;"><img src="./buy/pages/admin/plus.png"></a>
			<a href="#" id="me" class="invisible" onclick="show('pe'); hide('int'); hide('me');"><img src="./buy/pages/admin/minus.png"></a>
		</td>
		<td class="title">Catégorie</td>
		<td class="actio">
			<a href="#"><img src="./buy/pages/admin/sup.png"></a>
			<a href="#"><img src="./buy/pages/admin/sup.png"></a>
			<a href="#"><img src="./buy/pages/admin/sup.png"></a>
		</td>
	</tr>
	<tr class="invisible" id="int">
		<td colspan="3">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo nisi in sapien. Aliquam viverra sodales dolor. Morbi est ligula, blandit eu, tristique sit amet, lobortis a, enim. Phasellus imperdiet. Suspendisse cursus neque sed tortor. Nullam non nunc sed nisi malesuada scelerisque. Nunc sit amet quam. Aliquam erat volutpat. Vivamus vitae nibh iaculis turpis pellentesque pellentesque. Nulla varius mauris.
		</td>
	</tr>
</table>

Je ne vois aucune erreur, donc je ne comprends vraiment pas pourquoi cela réagit comme ça.

et voici là page en ligne pour tester : http://dib258.ironie.org/test.html

Merci d'avance

C'est normal !

Tu mets ton "tr" en

display: block;

alors qu'il doit être en

display: table-row;

Je suis pas un pro en explication et je n'ai (pas encore .. un jour peut être !) pas les connaissances pour t'expliquer ça correctement, mais je pense que tu affiches ton "tr" comme étant un block et ce block ne peut avoir les propriétés et les comportements d'une cellule de tabeau