28173 sujets

CSS et mise en forme, CSS3

[Résolu] Définir une hauteur de cellule en fonction du contenu

Je suis confronté à un petit soucis d'esthétisme sous Internet Explorer, alors que sous Firefox le résultat est parfait.

Je mets en place un catalogue de produits qui apparaissent chacun dans un tableau (s'agissant de données tabulaires, j'estime l'utilisation des tableaux appropriés Smiley cligne ).
Voici le résultat sous Firefox, et qui me convient :

http://img57.imageshack.us/img57/3199/firefox9yt.jpg

Et le résultat sous Internet Explorer 6 :

http://img511.imageshack.us/img511/7/ie8pt.jpg

Voici la page HTML correspondante : http://onct.free.fr/alsa/tableau.html

Mon problème est le suivant : sous Firefox, la cellule en bas à gauche s'adapte à la hauteur du texte présent dans la-dite cellule, laissant ainsi plus d'espace qu'il n'en faut pour le titre du tableau, présent dans la cellule en haut à gauche.
Sous Internet explorer, comme vous pouvez le voir, c'est l'inverse qui se produit : la hauteur de la cellule du titre s'adapte en fonction de son propre contenu, laissant de l'espace en trop dans la cellule du dessous.

Existe-t-il un moyen de forcer l'affichage de sorte que sous IE, le résultat soit identique que sous Firefox ?

Merci Smiley smile
Modifié par EcliptuX (25 May 2006 - 08:48)
Dans ton exemple, tu ne précises aucun padding.

J'imagine que la valeur du padding par défaut doit être différente dans IE et Firefox ( il est de 1px par défaut dans Firefox)

L'attribut cellpadding est valide en XHTML :
<table cellpadding="1px">


sinon tu peux jouer sur le padding des cellules dans ton CSS

  

table td {
    border: 1px black solid;
    padding: 1px;
  }
Modérateur
non, ce n'est pas l'impossible,

mais tu met en lien une page beaucoup trop eloigné des standards .

Pas de doctype, head, etc ... enfin bref tout ce qu'il faut pour avoir des resultats aléatoires a l'affichage ...

Fait un choix de doctype et construit ta page de test avec le minimum recommandé ++
DirtyF : j'ai essayé de préciser le cellpadding dans la balise TABLE et en spécifiant le padding dans la classe TD, mais cela n'a rien changé Smiley ohwell

gcyrillus : en effet, la page que j'ai cité pour exemple était loin d'être aux normes. En fait j'ai ce problème sur un site qui est en cours de développement et j'ai simplement créé une page d'exemple à la va-vite, histoire d'illustrer plus précisément mon propos.
Mais je viens de la mettre aux normes là Smiley cligne
Modifié par EcliptuX (17 May 2006 - 16:39)
donc existe-t-il un moyen de contrôler la hauteur d'une cellule au sein d'un tableau, de sorte à avoir le même résultat sous IE que sous Firefox ?
Modérateur
rebonjour

je viens de relire ton post et le lien que tu laisse.

J'avoue etre plutot "rookie" en terme de tableau et je n'ai pas bien compris ta façon de le structurer, je n'ai donc pas su y toucher.
Mais en le refaisant (comme je pense avoir compris) j'obtiens un resultat similaire dans Firefoxe, Internet explorer et opera.
code de la page test , ou je laisse ton tableau et celui que j'ai refait dessous:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

  <title>Page de test</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />


<style type="text/css">
  table {
    border: 1px black solid;
    border-collapse: collapse;
  }
  
  table td,   table th {
    border: 1px black solid;
    padding: 1px;
  }
</style>

</head>
<body>
<p>Tableau s'affichant differement d'un navigateur a l'autre  </p>
          <table cellpadding="1">
            <colgroup>
              <col class="c1" /><col class="c2" /><col class="c3" />  
            </colgroup>          
          <tbody>
            <tr>
              <td colspan="1" rowspan="2">Titre du tableau</td>
              <td>Tarif 1</td>

              <td>Tarif 2</td>
            </tr>
            <tr>
              <td colspan="1" rowspan="2">
                  10<br />
                  Ajouter
              </td>
              <td colspan="1" rowspan="2">

                    20<br />
                    Ajouter
              </td>   
            </tr>
            <tr>
              <td>Courte description sur une ligne, ou deux maximum</td>
            </tr>
          </tbody>
        </table>
<p>Une version reprenant les col group mais restructurant le tableau avec un thead</p>

<table >
            <colgroup>
              <col class="c1" /><col class="c2" /><col class="c3" />  
             </colgroup>           
          <thead>
           
              <th >Titre du tableau</th>
              <th>Tarif 1</th>

              <th>Tarif 2</th>
            </thead>
          <tbody>
            <tr>
              <td >Courte description sur une ligne, ou deux maximum</td>

              <td>
                  10<br />
                  Ajouter
              </td>
              <td >

                    20<br />
                    Ajouter
              </td>   
            </tr>
          </tbody>
        </table>	

<p>Une version reprenant les col group mais restructurant le tableau sans thead</p>

<table >
            <colgroup>
              <col class="c1" /><col class="c2" /><col class="c3" />  
             </colgroup>           
          <tbody>
           <tr>
              <td >Titre du tableau</td>
              <td>Tarif 1</td>

              <td>Tarif 2</td>
            
         </tr>
            <tr>
              <td >Courte description sur une ligne, ou deux maximum</td>

              <td>
                  10<br />
                  Ajouter
              </td>
              <td >

                    20<br />
                    Ajouter
              </td>   
            </tr>
          </tbody>
        </table>	    
</body>
</html>


Je ne sais pas si cela repond a ta question.

A propos il me semble bien qu'il ya chez IE6 un truc du genre et uniquement dans les tableaux une histoire de height et min-height :
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/minheight.asp

enfin , tout ce qu'il faut pour mettre un vrai m@dyeah la ou une fois de plus on ne s'y attend pas . sacré IE ...

++
Merci gcyrillus pour ton intervention.
j'ai essayé le code que tu donnes mais chez moi, que se soit sous IE6 ou IE5.5, aucun des 3 tableaux ne s'affichent correctement.
Je connais aussi les paramètres min-height, max-height, mais ça ne colle pas avec le résultat que j'attends.
La cellule en bas à gauche de mon exemple (voir premier post) devrait avoir JUSTE la hauteur de son contenu, celle en haut à gauche prenant l'espace restant.

Finalement, ce n'est peut-être pas dans les CSS qu'il faut chercher une solution.
Puisque la hauteur de la cellule en bas à gauche peut varier (1,2 voire 3 lignes), il faut peut-être se pencher sur une solution Javascript qui prennent en compte la hauteur du contenu à la volée.
Qu'en pensez-vous ?
Modérateur
bonjour,

j'ai compris l'opposée Smiley confused .
Par ailleurs le code precité passe comme je l'entendais , le titre sur une ligne et le commentaire dans une case de 2 lignes ... mais c'est pas ça que tu recherche.

pour l'oposé je comprends maintenant ton code et le defaut de IE.

En trichant avec les commentaires conditionnels tu peut peut-etre obtenir l'effet reherche comme ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Page de test</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
  table {
    border: 1px  solid #000;
    border-collapse: collapse;
  }
  table td,   table th {
    border: 1px  solid #000;
    padding: 1px;
  }

</style>
 <!--[if IE]>
<style type="text/css">
td.ie {
	width:0;
	border:0;
	padding:0;
}
table {
	border-right:0;
}
</style>
<![endif]--> 
</head>
<body>


<table >
<tbody>
<tr>
<td colspan="1" rowspan="2">Titre du tableau</td>
<td >Tarif 1</td>
<td >Tarif 2</td>
</tr>
<tr>
<td colspan="1" rowspan="2"> 10<br>
Ajouter</td>
<td colspan="1" rowspan="2"> 20<br>
Ajouter </td>

 <!--[if IE]>
<td  class="ie" ><br /><br />
</td>
<![endif]--> 

</tr>
<tr>
<td colspan="1" rowspan="1"> Courte description sur une ligne, ou
deux maximum </td>
</tr>
</tbody>
</table>	    
</body>


Je reviens sur un code de assez similaire au tien , j'ajoute une cellule pour IE a l'aide des CC.

tester dans IE6

++

<edit>note les 2 br necessaire dans la cellule pour IE </edit>
Modifié par gcyrillus (25 May 2006 - 01:27)
En effet ça semble fonctionner Smiley smile
Je n'ai pas le temps de mettre en oeuvre cette technique sur mon site en développement mais ça m'a l'air très positif Smiley smile

Un grand merci à toi Smiley cligne
Sujet clos
Aller à