Combinaison td.colspan & tr.display:block

Version imprimable

Bonjour à tous.

Voici un bout de code donnant des résultats différents sous IE7 d'une part, et sous Firefox3, Opera9, GoogleChrome-beta d'autre part :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">  
  <head>		 		     
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />		     
    <style type="text/css">
	.line_one { background : lime; }
	.line_two {background : red; }
    </style>
  </head>
  <body>    	  
 
    <table>			                                                           
      <tr class="line_one">				                                                   
        <td>colonne 1</td>                                                           
        <td>colonne 2</td>                                                  
      </tr>	
 
      <tr class="line_two" style="display: block;">			                     
        <td colspan="2">7777777777777777777</td>                                  
      </tr>			       
    </table>  
  </body>
</html>

Si j'enlève le display:block sur le tr, l'affichage est correct partout : la deuxième ligne s'étend sur toute la largeur du tableau. Si je le laisse, sous FF &co, la deuxième ligne ne s'étend que sur la largeur d'une colonne. Pourquoi ??? 8O

18/09/2008, 17h32
Bisûnûrs

Parce que la gestion des tableaux est différente sur ces navigateurs. Sur IE, les table, tr, td sont de type block, alors que sur Firefox ils sont respectivement de type table, table-row et table-cell.
En forçant le tr à block, tu modifies le comportement sur ces navigateurs et donc ta ligne réagit de manière inattendue.
18/09/2008, 17h41
Herode

Haaa, je ne connaissais pas ces types. Je croyais tous les éléments de type block ou inline. Merci pour l'info ! 8-)

Cela dit, c'est fort ennuyeux car ce n'est pas moi qui modifie le display de la sorte mais un framework javascript. Hmmmm hmmm... ça s'annonce difficile... :?
18/09/2008, 17h44
Bisûnûrs

Si tu as la main sur ce framework, en Javascript pour que le display reprenne sa valeur initiale sur tous les navigateurs, il suffit de lui donner la valeur vide :

Code:

blabla.style.display = '';