1. Accueil
  2. Question et réponse
  3. Aligner les colonnes de différentes tables dans une liste triable

Aligner les colonnes de différentes tables dans une liste triable

2011-04-19 3 views
0

J'ai une liste triable, chaque élément triable contient une table. Je voudrais aligner les colonnes de toutes les tables. L'utilisation de la disposition de table: fixe dans CSS fonctionne bien, mais quand le contenu de la cellule est trop long, le contenu se chevauche. Je voudrais que les tables se développent pour s'adapter au contenu des cellules et que la barre de défilement horizontale apparaisse s'il n'y a pas assez d'espace horizontal. J'ai essayé de résoudre cela en mettant tout dans une table, mais ce n'est pas bon, car dans certains cas, du contenu supplémentaire apparaît sous la table dans l'élément de tri, et le tri des lignes du tableau avec jquery ne fonctionne pas très bien.Aligner les colonnes de différentes tables dans une liste triable

La version simplifiée du code est ici: http://jsfiddle.net/buZUz/1/

Source

2011-04-19 dioslaska

Répondre

1

Je pense que ce que vous essayez d'atteindre ici avec plusieurs tables sera très difficile à réaliser et faire fonctionner accross différents navigateurs. J'ai eu beaucoup de "problèmes" dans le passé avec la mise en page: fixe et ne l'utilise plus jamais.

Je serais tenté de retourner à une table et de trier chaque ligne.

Pour obtenir le contenu supplémentaire sous les données de chaque ligne, vous pouvez:

-add another row with a colspan that covers all of the rows and put you extra content in that. 

-add hover event that shows the extra row or the data in a popup if it doesn't have to always be displayed. 

-add the extra detail in a seperate table , "a detail table" that gets populated depending on which row is selected.

Source

2011-04-19 08:58:44

+1

Avec une table est difficile à réaliser d'avoir un espace dans les éléments de tri (espacement des frontières est le meilleur, mais il ne fonctionne pas dans IE7, une autre idée consiste à envelopper le contenu des cellules dans divs et ajouter css à la div, cela fonctionnera bien, si tout le contenu de la cellule a une hauteur égale/fixe). Le problème avec la ligne supplémentaire est que sur le tri il devrait aller avec son "parent". Peut-être qu'il peut être résolu avec une solution de contournement dans les événements triables. Quoi qu'il en soit, merci pour les idées, si rien de mieux ne se présente, je vais envisager de revenir à une table. – dioslaska

Questions connexes

 Questions connexes