28172 sujets

CSS et mise en forme, CSS3

Problème d'imbrication de tableaux

Bonjour à tous,

Je suis actuellement confronté à un problème lors de l'imbrication de tableaux en HTML (+css+JS).

Je vais essayer d'expliquer mon problème.

J'ai un tableau contenant une liste d'éléments sur 5 colonnes. La dernière colonne contient un élément qui lorsque l'on clique dessus affiche une ligne d'informations sur la l'igne d'éléments précédente (qui était cachée (display:none;) jusqu'alors. Cette ligne d'information vient donc "s'intercaler" entre deux lignes d'éléments.

La ligne d'informations est en fait un seul <td> (avec un colspan="5"). Ce <td> contient un tableau de 2 colonnes.

Le fait est que le tableau contenu dans la ligne d'information contient une cellule dont le texte est long et dépasse la largeur de la cellule (donc le texte est placé sur 2 lignes.)

Le problème est que lorsqu'on affiche cette ligne d'informations, le tableau principal d'éléments change de format. (les colonnes changent de largeur) et je ne voudrais pas que cela arrive.

J'espère que le problème est énnoncé clairement.

Avez-vous des idées sur comment éviter qu'une donnée longue dans un tableau imbriqué, n'influe sur les dimensions des colonnes du tableau hote ?

PS: les largeurs de colonnes du tableau hote ne peuvent pas être fixées en largeur (sinon ca fontionnerait comme ca)...
Modifié par charles.marais (15 Jan 2009 - 11:32)
Pas compris grand'chose ;-(

C'est ça ton montage :

------------------------------------------------------------
tr1 > td1 | td2 | td3 | td4 | td5
------------------------------------------------------------
tr/td colspan="5" caché
------------------------------------------------------------
tr2 > td1 | td2 | td3 | td4 | td5
------------------------------------------------------------

et quand on clique sur tr1 > td5 ça affiche le td/tr caché ?
Le problème (que je suis en train d'essayer de reproduire sur sur un exemple simple) est le suivant :

Le tableau fait, par exemple, 500 px de large, les colonnes ont des largeurs automatiques qui dépendent du contenu. Et lorsque j'affiche la ligne d'informations (tr/td colspan="5"), les largeurs des colonnes (du tableau principal) sont modifiées alors que le contenu de celles ci n'a pas changé ...
Modifié par charles.marais (15 Jan 2009 - 13:29)
Je ne vois aucune raison pour que la tr masquée décide d'un coup d'agrandir le tableau initial, sauf si le contenu est un objet plus grand (genre une image) auquel un retour à la ligne ne peut s'appliquer. Ou alors tu as à l'intérieur un objet de dimension égale à la table mais qu'un padding affecté aux cellules décale à gauche.
Un exemple en ligne ???
Modifié par Arsene (15 Jan 2009 - 14:10)
Je n'ai pas d'exemple en ligne mais voici le code d'un exemple simplifié mais sur lequel le cas se produit... :


<html>
  <head>
  <script type="text/javascript">
  <!--
  function Montre() {
    if(document.getElementById('tr_cache').style.display != 'none')
    {
      document.getElementById('tr_cache').style.display = 'none';
    }else{
      document.getElementById('tr_cache').style.display = '';
    }
  }
  //-->
  </script>
  </head>
  <body>
    <table border="1" style="width:500px;">
      <tr>
	<td>
	AA
	</td>
	<td>
	  aaaaaaaaaaaaaaaaaaa
	</td>
	<td>
	Aa aaa
	</td>
	<td>
	aaaaaaaaaaaaaa
	</td>
	<td>
	<input type="button" value="AA" onclick="Montre();"/>
	</td>
      </tr>
      <tr id="tr_cache" style="display:none;">
	<td colspan="5">
	<table style="width:100%">
	  <tr>
	    <td>
	    Informations 1 :
	    </td>
	    <td>
	    aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaa
	    </td>
	  </tr>
	  <tr>
	    <td>
	    Informations 2 :
	    </td>
	    <td>
	    Valeur 2
	    </td>
	  </tr>
	</table>
	</td>
      </tr>
    </table>
  </body>
</html>
Ben déjà pour commencer "table dans table" c'est pas très joli question accessibilité. En plus, des infos cachées (display:none) par défaut non plus.

Donc :
1. afficher par défaut la tr masquée et ne la cacher que si JS est actif : du coup ton onclick prend tout son sens. Autre possibilité, affecter un a:hover/a:focus légèrement plus complexe à monter.
2. décider que la tr cachée contiendra 2 cellules du tableau initial avec les valeurs de colspan ad hoc... et avec le prob nouveau qui est que du coup les informations structurantes passées dans <thead> (que tu n'as pas omises n'est-ce pas ?) sont inapplicables aux contenus de ces cellules... donc :
3. tu remplaces cette tr cachée par des trucs genre infobulles mais en plus grand. Ou :
4. tu revois ta conception d'organisation et présentation de l'information.
Alors pour répondre à tes différentes questions :

Je suis OK pour dire que table dans table n'est pas très "joli" sauf que la table principale contient un certain nombre d'éléments et que pour l'instant je n'ai pas trouvé d'autres solutions.

Les informations cachées par défaut le sont par ce qu'elles sont de moindre importance.
Le JS actif est vérifié à un autre endroit dans l'application et cette page ne sera pas accessible si l'utilisateur n'a pas le JS actif.... ce qui répond à la sol 1.

Le tableau placé dans les tr cachées est fourni par une autre entité et doit donc être affiché tel quel (sous forme de tableau)... ce qui exclut ta solution 2.

Sinon en ce qui concerne les info bulles, ce n'est pas possible (ou du moins pas pratique) car on doit pouvoir ouvrir les informations de plusieurs lignes en même temps, pour les comparer par exemple. ce qui répond à la sol 3

Il ne me reste plus que la sol 4 Smiley cligne ...

C'est pas grave je vais continuer à chercher.

J'aurais tout de même aimé savoir si en l'état (table dans table) il existait une solution...

J'ai regardé un peu du coté de nowrap mais cela à des incidences sur la taille globale du tableau dans le cas ou un texte est vraiment trop long....

Donc voila... je reste à l'écoute en cas de bonnes idées ...
Sujet clos
Aller à