Combinaison td.colspan & tr.display:block

**Herode** · 18/09/2008, 17h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ???

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

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.

**Herode** · 18/09/2008, 17h41

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

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

**Bisûnûrs** · 18/09/2008, 17h44

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

blabla.style.display = '';

Combinaison td.colspan & tr.display:block

CSS

Vue hybride

Discussions similaires

Partager

Partager