table height="100%"

[Wanbli]

Je suis sure que le sujet a déja été abordé mais malgré mes recherches ... je n'ai pas trouvé la réponse ...

Tout d'abord je préfère prévenir les gourous du "tout" CSS, je ne fais pas l'apologie de la mise en forme par tableau mais dans le cas concret je ne peux pas encore remettre en cause la mise en forme par tableau pour cette page donc ... JE N'AI PAS LE CHOIX donc ...

Je préfère dire que je n'attends pas de réponses "passe par la mise en forme CSS"

Mon souci :

J'ai un tableau général avec 2 colonnes et plusieurs lignes.

Dans chaque cellule de ce tableau, j'ai un autre tableau.

Or, le contenu du tableau inséré dans la cellule de gauche n'est pas forcément de la meme longueur que celui de la cellule de droite. En conséquence, les 2 tableaux insérés ne sont pas forcément de la meme hauteur.

Pourtant, je souhaiterais qu'à l'affichage, le tableau le moins haut s'étende verticalement pour que les 2 tableaux soient visuellement de la meme taille.

Donc je pensais tout simplement que pour tous mes tableaux un attribut <table height="100%"> ferait l'affaire, en disant "je souhaite que verticalement mon tableau fasse 100% de la hauteur de la cellule dans laquelle il se trouve" quelle que soit la hauteur de cette cellule.

Et ....

Ca ne marche pas ... Ouiiiiiiiin ...

P.S. Ca ne marche ni sur Firefox ni sur IE ...

QQ'un aurait-il l'explication ET/OU la solution ...

Je lui en serais fort reconnaissante, surtout que c'est assez urgent ... mise en ligne de cette page prévue pour aujourd'hui

merci ....

[Loupilo]

Salut,

Peux-tu mettre une page d'exemple en ligne ?

C'est plus simple pour t'aider

Loupilo.

[Titag]

Bonjour,

As-tu essayé de mettre l'attribut height dans le <tr> ?

[Nullette]

Je ne sais pas si j'ai bien compris ta question, mais ets-ce que tu indiques la dimension de chaque cellule ?

Par exemple pour un tableau avec entêtes :

<tr bgcolor="#fff1d1"> 
          <th scope="col" abbr="Date et heure" width="15%">Date</th>
          <th scope="col" width="32%">Sujet</th>
          <th scope="col" width="27%">Lieu</th>
          <th scope="col" abbr="Observations" width="26%">Obs</th>
        </tr>

[Titag]

Oui, si ca ne marche pas dans la balise <table>, essaye dans les autres.

La balise <tr> créé une ligne... pourquoi ne pas lui indiquer qu'il faut qu'elle fasse 100% de la hauteur ?

Et, si ca ne marche pas, fait le pour chaque cellule, tu sera sur du resultat

[Wanbli]

Merci pour vos suggestions ...

Malheureusement je ne peux pas encore mettre cette page en ligne, c'est un peu compliqué.

Je ne sais pas si j'ai bien compris ta question, mais ets-ce que tu indiques la dimension de chaque cellule ?

Ce qui est compliqué, c'est que la hauteur de chaque cellule principale "contenante" dépendra justement de la longueur du texte dans le tableau inséré ...

Voici un bout de code fictif pour vous montrer :

<table width="100%" border="1">
 	 <tr>
    <td width="50%">
   	 <table width="100%" height="100%">
      <tr >
     	 <td bgcolor="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris leo</td>
      </tr>
   	 </table>
    </td>
    <td width="50%">
   	 <table width="100%" height="100%">
      <tr>
     	 <td bgcolor="gray">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris leo. Maecenas viverra bibendum velit. Curabitur at risus. Nulla mattis ante in ipsum luctus rutrum. Sed a felis. Mauris orci ipsum, congue non, tristique eu, bibendum id, sem. Praesent ante. Suspendisse sollicitudin, dui nec dictum fringilla, wisi purus suscipit est, sed vehicula arcu neque in velit. Suspendisse in massa. Aliquam nunc dui, fringilla vel, nonummy eu, dictum quis, ipsum. Curabitur ullamcorper. Ut nec sapien quis urna pretium bibendum. Donec at wisi vel erat egestas eleifend. Morbi quis diam. Sed bibendum, augue vitae lacinia feugiat, nulla enim pulvinar nisl, sit amet pharetra dui turpis vitae nulla. Maecenas nunc.</td>
      </tr>
   	 </table>
    </td>
 	 </tr>
  </table>

Voyez ? Je souhaiterais que ma case rouge, meme si son contenu est minime, remplisse tout le vertical ... pour s'ajuster à la hauteur (inconnue par avance de la cellule grise ...

La balise <tr> créé une ligne... pourquoi ne pas lui indiquer qu'il faut qu'elle fasse 100% de la hauteur ?

Bin ... je ne suis pas sure de t'avoir comprise mais le souci c'est que dans la réalité, mes tableaux sont formés de plus d'un seul <tr>

Bref je continue de chercher ... bon ... j'ai un gros deadline pour la mise en ligne de cette page, je crois que dans l'urgence je vais devoir faire avec une hauteur de cellule "contenante" fixe ...

[Monique]

Bonjour,

Je ne suis vraiment pas certaine d'avoir compris ce que tu souhaites, mais si tu affectes la couleur de fond aux deux cellules du tableau principal comme ceci

<table width="100%" border="1">
  <tr>
   <td width="50%" bgcolor="red">
    <table width="100%" height="100%">
     <tr >
      <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris leo</td>
     </tr>
    </table>
   </td>
   <td width="50%" bgcolor="gray">
    <table width="100%" height="100%">
     <tr>
      <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris leo. Maecenas viverra bibendum velit. Curabitur at risus. Nulla mattis ante in ipsum luctus rutrum. Sed a felis. Mauris orci ipsum, congue non, tristique eu, bibendum id, sem. Praesent ante. Suspendisse sollicitudin, dui nec dictum fringilla, wisi purus suscipit est, sed vehicula arcu neque in velit. Suspendisse in massa. Aliquam nunc dui, fringilla vel, nonummy eu, dictum quis, ipsum. Curabitur ullamcorper. Ut nec sapien quis urna pretium bibendum. Donec at wisi vel erat egestas eleifend. Morbi quis diam. Sed bibendum, augue vitae lacinia feugiat, nulla enim pulvinar nisl, sit amet pharetra dui turpis vitae nulla. Maecenas nunc.</td>
     </tr>
    </table>
   </td>
  </tr>
 </table>

[Titag]

Ce code "marche" aussi :

<table width="100%" border="1">
	<tr>
  <td width="50%" height=100%>
 	 <table width="100%"  height="100%">
    <tr height="100%">
   	 <td bgcolor="red">Lorccsdcsdcem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris leo</td>
    </tr>
 	 </table>
  </td>
  <td width="50%"  height=100%>
 	 <table width="100%" height="100%">
    <tr>
   	 <td bgcolor="gray">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris leo. Maecenas viverra bibendum velit. Curabitur at risus. Nulla mattis ante in ipsum luctus rutrum. Sed a felis. Mauris orci ipsum, congue non, tristique eu, bibendum id, sem. Praesent ante. Suspendisse sollicitudin, dui nec dictum fringilla, wisi purus suscipit est, sed vehicula arcu neque in velit. Suspendisse in massa. Aliquam nunc dui, fringilla vel, nonummy eu, dictum quis, ipsum. Curabitur ullamcorper. Ut nec sapien quis urna pretium bibendum. Donec at wisi vel erat egestas eleifend. Morbi quis diam. Sed bibendum, augue vitae lacinia feugiat, nulla enim pulvinar nisl, sit amet pharetra dui turpis vitae nulla. Maecenas nunc.</td>
    </tr>
 	 </table>
  </td>
	</tr>
</table>

[tictact]

et comme ça avec un valign="top" :

<table width="100%" border="1" >
 <tr>
  <td width="50%" bgcolor="yellow">
   <table width="100%" height="100%">
    <tr >
  <td width="50%" bgcolor="red" valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris leo. Maecenas viverra bibendum velit. Curabitur at risus. Nulla mattis ante in ipsum luctus rutrum. Sed a felis. Mauris orci ipsum, congue non, tristique eu, bibendum id, sem. Praesent ante. Suspendisse sollicitudin, dui nec dictum fringilla, wisi purus suscipit est, sed vehicula arcu neque in velit. Suspendisse in massa. Aliquam nunc dui, fringilla vel, nonummy eu, dictum quis, ipsum. Curabitur ullamcorper. Ut nec sapien quis urna pretium bibendum. Donec at wisi vel erat egestas eleifend. Morbi quis diam. Sed bibendum, augue vitae lacinia feugiat, nulla enim pulvinar nisl, sit amet pharetra dui turpis vitae nulla. Maecenas nunc.</td>
     <td width="50%" bgcolor="gray" valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris leo. Maecenas viverra bibendum velit. Curabitur at risus.</td>
    </tr>
   </table>
  </td>
  <td width="50%" bgcolor="gray">
   <table width="100%" height="100%">
    <tr>
   <td width="50%" bgcolor="gray" valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
     <td width="50%" bgcolor="green" valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris leo. Maecenas viverra bibendum velit. Curabitur at risus. Nulla mattis ante in ipsum luctus rutrum. Sed a felis. Mauris orci ipsum, congue non, tristique eu, bibendum id, sem. Praesent ante. Suspendisse sollicitudin, dui nec dictum fringilla, wisi purus suscipit est, sed vehicula arcu neque in velit. Suspendisse in massa. Aliquam nunc dui, fringilla vel, nonummy eu, dictum quis, ipsum. Curabitur ullamcorper. Ut nec sapien quis urna pretium bibendum. Donec at wisi vel erat egestas eleifend. Morbi quis diam. Sed bibendum, augue vitae lacinia feugiat, nulla enim pulvinar nisl, sit amet pharetra dui turpis vitae nulla. Maecenas nunc.</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

[Wanbli]

Merci pour toutes vos suggestions, en fait hier, vu l'état d'urgence de la mise en ligne (mon patron me tannait toutes les 2 min pour savoir si la page était en ligne ...), j'ai dû utiliser la méthode la plus "efficace" (bien que loin d'être la meilleure mais la fin justifie les moyens ...) à savoir ... la hauteur fixe !!

Heu pardon pour les tolllés que j'ai dû provoquer !

Mais !!! Comme en ce bas monde rien n'est jamais définitif, je me repencherai dès que possible sur le problème afin que ma page soit nickel. Heureusement, sachant que le contenu de chaque tableau n'est pas trop dense, j'ai pu trouver une hauteur fixe de tableau qui passe bien, quelle que soit la résolution. (si vous voulez finalement voir le résultat c'est ici : http://www.kelassur.com )

La solution de Monique me semble bien adaptée, meme s'il va falloir que je remanie la structure de mes tableaux.

Pour celle de Titag, j'ai un doute car mon tableau contenu possède plusieurs <tr> donc je ne vois pas très bien à quel <tr> je devrais appliquer ma hauteur de 100%, je viens de découvrir la suggestion de tictact donc il va falloir que j'étudie ça de plus près.

Je voulais en tous cas tous vous remercier pour vos propositions, ... c'est ce qui fait qu'on devient accro du hub ... on sait qu'on ne vous laissera pas tomber ...

Voila, ça y est je suis z'émue !