28173 sujets

CSS et mise en forme, CSS3

Opera et le layout des tables

Hi all Smiley cligne

J'ai actuellement un petit souci avec un rendu de table sous Opera Smiley eek

Voici un code simpifié all-in-one pour se rendre compte du problème :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 <style>
 
  * {
   font-family: Verdana;
   padding: 0;
   margin: 0;
   border: 0;
  }
 
  ul , li {
   list-style-type: none;
  }
 
  #table_gestion_themes {
   border: 1px rgb(50,50,50) solid;
   border-collapse: collapse;
   font-size: 10px;
   width: 100%;
  }
 
  #table_gestion_themes  * th {
   font-weight: bold;
   color: rgb(200,200,200);
   padding: 0.5em 1em;
   border: 1px rgb(50,50,50) solid;
  }
 
  #table_gestion_themes  * td {
   text-align: center;
   border: 1px rgb(50,50,50) solid;
  }
   
  #table_gestion_themes  * td.theme_apercu {
   height: 200px;
  }
 
 
  #themes_liste {  /* ul */
   font-size: 10px;
   /*float: left;*/
   /*background: url(../img/bg_footer.png) repeat;*/
  }
 
  #themes_liste  * a {  
   display: block;
   padding: 1em;
   color: rgb(200,200,200);
   border-left: 5px transparent solid;
   border-right: 5px transparent solid;
   border-top: 1px transparent solid;
   border-bottom: 1px transparent solid;
  }
 
  #themes_liste * a:hover {
   cursor: url(../curseurs/curseur_1.cur), crosshair;
   color: white;
   background: url(../img/bg_footer.png) repeat;
   border-left: 5px rgb(100,100,100) solid;
   border-right: 5px rgb(100,100,100) solid;
   border-top: 1px rgb(100,100,100) solid;
   border-bottom: 1px rgb(100,100,100) solid;
  }
 
 
 </style>
 
</head>
 
<body>
 
  <table id="table_gestion_themes" cellpadding="0" cellspacing="0">
   <tr>
    <th>Aperçu</th>
    <th colspan="2">Resolutions Supportées</th>
    <th>Options</th>
   </tr>
   <tr>
    <td rowspan="8" class="theme_apercu">
    </td>
    <td>640 x 480</td>
    <td>1600 x 1200</td>
   </tr>
   
   <tr>
    <td>800 x 600</td>
    <td>1680 x 1050</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1024 x 768</td>
    <td>1920 x 1080</td>
    <td></td>
   </tr>
   
   <tr>
    <td>1280 x 720</td>
    <td>1920 x 1200</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1280 x 960</td>
    <td>2048 x 1536</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1280 x 1024</td>
    <td>2560 x 1600</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1440 x 900</td>
    <td>2560 x 2048</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1440 x 960</td>
    <td></td>
    <td></td>
   </tr>
 
  </table>
 
</body>
 
</html>


Sous Firefox, les cellules sont bien réparties sur toute la hauteur disponible, et sont de hauteurs égales.

Sous Opera, la dernière cellule est étirée afin de combler l'espace restant Smiley sweatdrop

Une âme charitable saurait-elle résoudre ce petit problème ? Smiley jap
Il me semble que le calcul des dimensions des tableaux est assez aléatoire d'un navigateur à l'autre (les implémentations sont assez bricolées de part et d'autre, donc pas très fiables...).

Mais si tu veux donner une certaine hauteur (dans le but d'obtenir une respiration de la lecture) pour tes td, pourquoi ne pas tout simplement faire :
td {padding: .5em 10px;}
par exemple? Tu le fais déjà pour les th. (Nota: on préfèrera les valeurs en pixels pour les marges et padding latéraux, afin d'éviter de perdre en espace d'affichage lors de l'agrandissement du texte).
j'avais déjà essayé d'appliquer un padding aux td, mais ça ne résout pas le problème :

http://img205.imageshack.us/img205/4763/operalayoutbugng0.png

A partir du moment où la hauteur de la cellule qui s'étend (rowspan) est supérieure à la somme de la hauteur calculée de chacune des cellules, la hauteur de la dernière cellule est étirée.

Et étant donné que la hauteur de la cellule en rowspan est appellée à être dynamique, de même que le nombre de cellule empilée à sa droite, pas possible de jouer avec des astuces qui ne fonctionneraient que dans un seul cas Smiley decu
Ben la solution est simple:
1. tu utilises du padding pour avoir une bonne respiration du texte dans les cellules (vu que la répartition dynamique de l'espace vertical n'est pas fiable, il ne faut pas se reposer dessus);
2. tu acceptes le fait que dans tel ou tel navigateur, tu auras un rendu légèrement dégradé mais non problématique avec une dernière cellule plus haute que les autres.

En tout cas, ça c'est la solution pas prise de tête. Ensuite, il y a peut-être moyen de continuer à chercher une solution technique au problème observé dans Opera, mais il faut voir si le gain obtenu (sous réserve que ce problème puisse être corrigé!) vaut le temps passé sur ce problème. Smiley cligne
Modifié par Florent V. (20 Oct 2007 - 13:46)
En général j'aime chercher la petite bête et tout régler dans les moindres détails Smiley murf

C'est vrai que ce n'est pas un rendu cataclysmique, mais en tout cas c'était la première fois que je rencontrais ce type de rendu pour une table (jusqu'alors, j'étais persuadé que tous les navigateurs effectuaient une répartition des cellules dynamiques optimale...et que c'était entre autre pour cette raison que certains persistent à structurer une page avec des tables Smiley eek )

Sinon j'ai pensé à dynamiser la portion de code css équivalente avec un algo php du genre


hauteur_cellule = (hauteur_cellule_apercu / nbrCellules) - 2 

/* -2 pour les bordures */


Mais ça serait insister lourdement Smiley smile

Merci pour ton aide.
Modifié par ANViL (20 Oct 2007 - 14:48)
Sujet clos
Aller à