Comment fixer la largeur d'un tableau dynamique ?
Résolu/Fermé
Bilow
Messages postés
1022
Date d'inscription
samedi 21 août 2010
Statut
Membre
Dernière intervention
2 août 2015
-
6 avril 2014 à 17:09
Bilow Messages postés 1022 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 2 août 2015 - 12 avril 2014 à 14:05
Bilow Messages postés 1022 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 2 août 2015 - 12 avril 2014 à 14:05
A voir également:
- Html tableau largeur colonne automatique
- Tableau croisé dynamique - Guide
- Déplacer une colonne excel - Guide
- Tableau ascii - Guide
- Tableau word - Guide
- Message automatique thunderbird - Guide
3 réponses
Salut,
Il faut que vous indiquez des tailles à vos colonnes.
Pour cela vous avec le css width (largeur), le mieux est de fixer ces tailles en pourcentage.
Par exemple si vous voulez 3 colonnes identiques:
tr{
width:33%;
<!---3X33=99% , preque la totalité de la largeur totale(100%)-->
}
Effectivement javascript n'a rien à voir là dedans puisque l'affichage est fait par HTML et CSS Parfois javascript permet de modifier celui ci mais sans une raison comme 'l'interactivité il n'y a aucun intérêt à modifier par javascript le CSS, autant utiliser directement celui ci.
Je vous fait remarque que les tableaux sont exclusivement réservées à des données tabulaires (chiffres et calculs comme sur un tableur) sinon vous devez utiliser 3 blocs de contenu(comme des div) que vous placez côte à côte.
Rien ne vous y oblige s'il ne s'agit pas de valeurs mathématique mais l'un des nombreux problèmes de cette utilisation de la balise table pour la mise en page sera que son contenu ne sera pas référencé puisque son contenu n'est pas considéré comme un texte de paragraphe mais un intitulé de calculs et les valeurs de ceux ci(en gros).
Il faut que vous indiquez des tailles à vos colonnes.
Pour cela vous avec le css width (largeur), le mieux est de fixer ces tailles en pourcentage.
Par exemple si vous voulez 3 colonnes identiques:
tr{
width:33%;
<!---3X33=99% , preque la totalité de la largeur totale(100%)-->
}
Effectivement javascript n'a rien à voir là dedans puisque l'affichage est fait par HTML et CSS Parfois javascript permet de modifier celui ci mais sans une raison comme 'l'interactivité il n'y a aucun intérêt à modifier par javascript le CSS, autant utiliser directement celui ci.
Je vous fait remarque que les tableaux sont exclusivement réservées à des données tabulaires (chiffres et calculs comme sur un tableur) sinon vous devez utiliser 3 blocs de contenu(comme des div) que vous placez côte à côte.
Rien ne vous y oblige s'il ne s'agit pas de valeurs mathématique mais l'un des nombreux problèmes de cette utilisation de la balise table pour la mise en page sera que son contenu ne sera pas référencé puisque son contenu n'est pas considéré comme un texte de paragraphe mais un intitulé de calculs et les valeurs de ceux ci(en gros).
Bilow
Messages postés
1022
Date d'inscription
samedi 21 août 2010
Statut
Membre
Dernière intervention
2 août 2015
117
11 avril 2014 à 23:35
11 avril 2014 à 23:35
Bonjour,
Le tableau, dans ce cas-ci, est une liste de championnats sportifs à venir, avec nom, date, et date limite (date ou "inscriptions en ligne clôturées"). J'aurais du mal à le remplacer par des div.
Je veux bien donner des tailles en pourcentage, mais quels pourcentages vais-je bien pouvoir mettre ? Etant donné qu'une fois, les noms des championnats seront petits et nécéssiteront peu de place, et que l'autre fois, les noms des championnats seront longs.
De même pour la troisième colonne, les dates limites. Il se peut que cette colonne ne contienne que de simples dates (ex. 1er janvier 2015) tout comme il se peut qu'une cellule contienne "Inscriptions en ligne clôturées en ligne le 20 décembre 2014".
La largeur des colonnes est réglée automatiquement, sans aucun attribut width pour les tr ou td. Le problème est que ces largeurs sont recalculées lorsque le nom du championnat (en 1e colonne) devient gras lors du passage de la souris (:hover) ! Il y a pourtant du blanc/du vide autour du nom des championnats, mais malgré ça le tableau (et c'est normal) est redimensionné. N'y a-t-il pas un attribut ressemblant à "une-fois-affiché=tu-bouges-plus" ?
J'espère que vous voyez ce que je veux dire.
Merci
Le tableau, dans ce cas-ci, est une liste de championnats sportifs à venir, avec nom, date, et date limite (date ou "inscriptions en ligne clôturées"). J'aurais du mal à le remplacer par des div.
Je veux bien donner des tailles en pourcentage, mais quels pourcentages vais-je bien pouvoir mettre ? Etant donné qu'une fois, les noms des championnats seront petits et nécéssiteront peu de place, et que l'autre fois, les noms des championnats seront longs.
De même pour la troisième colonne, les dates limites. Il se peut que cette colonne ne contienne que de simples dates (ex. 1er janvier 2015) tout comme il se peut qu'une cellule contienne "Inscriptions en ligne clôturées en ligne le 20 décembre 2014".
La largeur des colonnes est réglée automatiquement, sans aucun attribut width pour les tr ou td. Le problème est que ces largeurs sont recalculées lorsque le nom du championnat (en 1e colonne) devient gras lors du passage de la souris (:hover) ! Il y a pourtant du blanc/du vide autour du nom des championnats, mais malgré ça le tableau (et c'est normal) est redimensionné. N'y a-t-il pas un attribut ressemblant à "une-fois-affiché=tu-bouges-plus" ?
J'espère que vous voyez ce que je veux dire.
Merci
Il me semble que c'est plus une question de mise en page que de technologie:
Je veux bien donner des tailles en pourcentage, mais quels pourcentages vais-je bien pouvoir mettre ? Etant donné qu'une fois, les noms des championnats seront petits et nécéssiteront peu de place, et que l'autre fois, les noms des championnats seront longs.
Il faut donc faire un choix: soit vous prévoyez des cases plus grandes même si le contenu est petit, soit vous utilisez autre chose qu'un tableau avec des cases 1,2,3 ou alors vous calculez des rapports de taille en fonction du nombre de caractère de chaque case(mais bon c'est une perte de temps je trouve, ça ne garantira pas que vous aurez affichage propre est clair...).
C'est plus une question d'organisation(mise en page) que vous devez décider.
Vous le dites vous même : c'est impossible d'avoir une case qui fait la même taille pour mettre une date et un texte avec une date(1er janvier 2015 ou Inscriptions en ligne clôturées en ligne le 20 décembre 2014 ).
Donc il faut que vous trouviez autre chose, comme séparer la date et le texte(ce qui est mieux au niveau de la base de données, pas seulement mieux mais juste tandis que c'est faux d'indiquer un champ date + texte, ni l'un ni l'autre ne peuvent être utilisé indépendamment(la date pour classer par date, le texte pour indiquer un commentaire sur une date, faire une recherche sur uniquement les tournois qui proposent une inscription etc...)).
Et forcément faire 2 cases.
Pour les astuces (mais ça serait pas jojo, demandera beaucoup de travail et maintenance pour un résultat qui sera pas terrible) c'est de ne pas indiquer de dimension du tout(la taille s'adapte automatiquement) ou de calculer la largeur en rapport avec le nombre de lettres de la chaîne de caractères, éventuellement rajouter des cellules vides qui serviront à "espacer" les autres pour que ce soit un minimum homogène.
Bref l'informatique est faite pour se simplifier la vie et là vous vous la compliquez je trouve.
Repensez votre affichage, un tableau(adapté puisque données tabulaires) peut très bien comprendre une case avec 3 informations:nom du championnat, date, commentaire éventuel.
Si vous les mettez chacune à la ligne vous aurez facilement des cases de mêmes dimensions et qui un tableau se lit clairement, vous pouvez indiquer la date et dans la colonne suivante l'information 'commentaire" par exemple: "date limite d'inscription".
A vous de trouver une mise en page cohérente et qui va servir le sujet
Et attention à la séparation des informations en données: une date doit être strictement une seule donnée, un commentaire aussi puisque en analyse chaque donnée doit être la plus petite information qui est présente. Si cela est fait vous pouvez facilement utiliser la même taille de case pour
14 février 2014
et 14 février 2014 *date limite des inscriptions(écrit en italique avec une police plus petite après u_n saut à la ligne par exemple).
Je veux bien donner des tailles en pourcentage, mais quels pourcentages vais-je bien pouvoir mettre ? Etant donné qu'une fois, les noms des championnats seront petits et nécéssiteront peu de place, et que l'autre fois, les noms des championnats seront longs.
Il faut donc faire un choix: soit vous prévoyez des cases plus grandes même si le contenu est petit, soit vous utilisez autre chose qu'un tableau avec des cases 1,2,3 ou alors vous calculez des rapports de taille en fonction du nombre de caractère de chaque case(mais bon c'est une perte de temps je trouve, ça ne garantira pas que vous aurez affichage propre est clair...).
C'est plus une question d'organisation(mise en page) que vous devez décider.
Vous le dites vous même : c'est impossible d'avoir une case qui fait la même taille pour mettre une date et un texte avec une date(1er janvier 2015 ou Inscriptions en ligne clôturées en ligne le 20 décembre 2014 ).
Donc il faut que vous trouviez autre chose, comme séparer la date et le texte(ce qui est mieux au niveau de la base de données, pas seulement mieux mais juste tandis que c'est faux d'indiquer un champ date + texte, ni l'un ni l'autre ne peuvent être utilisé indépendamment(la date pour classer par date, le texte pour indiquer un commentaire sur une date, faire une recherche sur uniquement les tournois qui proposent une inscription etc...)).
Et forcément faire 2 cases.
Pour les astuces (mais ça serait pas jojo, demandera beaucoup de travail et maintenance pour un résultat qui sera pas terrible) c'est de ne pas indiquer de dimension du tout(la taille s'adapte automatiquement) ou de calculer la largeur en rapport avec le nombre de lettres de la chaîne de caractères, éventuellement rajouter des cellules vides qui serviront à "espacer" les autres pour que ce soit un minimum homogène.
Bref l'informatique est faite pour se simplifier la vie et là vous vous la compliquez je trouve.
Repensez votre affichage, un tableau(adapté puisque données tabulaires) peut très bien comprendre une case avec 3 informations:nom du championnat, date, commentaire éventuel.
Si vous les mettez chacune à la ligne vous aurez facilement des cases de mêmes dimensions et qui un tableau se lit clairement, vous pouvez indiquer la date et dans la colonne suivante l'information 'commentaire" par exemple: "date limite d'inscription".
A vous de trouver une mise en page cohérente et qui va servir le sujet
Et attention à la séparation des informations en données: une date doit être strictement une seule donnée, un commentaire aussi puisque en analyse chaque donnée doit être la plus petite information qui est présente. Si cela est fait vous pouvez facilement utiliser la même taille de case pour
14 février 2014
et 14 février 2014 *date limite des inscriptions(écrit en italique avec une police plus petite après u_n saut à la ligne par exemple).
Bilow
Messages postés
1022
Date d'inscription
samedi 21 août 2010
Statut
Membre
Dernière intervention
2 août 2015
117
12 avril 2014 à 14:05
12 avril 2014 à 14:05
Je suis d'accord que calculer la longueur en fonction du nombre de caractères est une perte de temps.
Concernant la base de données, pas de problème, le nom du championnat est enregistré avec deux timestamp et le message des inscriptions clôturées est affiché si le timestamp de la date limite est inférieur au timestamp actuel. Donc un tri est toujours possible.
L'idée de rajouter des cases vides aux côtés gauche et droit me semblait une bonne idée mais je n'ai pas réussit malgré quelques essais.
J'ai enfin trouvé la solution !
Il faut dupliquer la liste dans le même tableau (avoir deux fois les mêmes tr), rendre la deuxième liste (dupliquée donc) grasse de manière à ce que le tableau prenne les dimensions nécessaires et pour finir masquer cette deuxième liste sans la supprimer avec visibility: collapse;
Un exemple sera plus parlant :
Merci de m'avoir aidé
Concernant la base de données, pas de problème, le nom du championnat est enregistré avec deux timestamp et le message des inscriptions clôturées est affiché si le timestamp de la date limite est inférieur au timestamp actuel. Donc un tri est toujours possible.
L'idée de rajouter des cases vides aux côtés gauche et droit me semblait une bonne idée mais je n'ai pas réussit malgré quelques essais.
J'ai enfin trouvé la solution !
Il faut dupliquer la liste dans le même tableau (avoir deux fois les mêmes tr), rendre la deuxième liste (dupliquée donc) grasse de manière à ce que le tableau prenne les dimensions nécessaires et pour finir masquer cette deuxième liste sans la supprimer avec visibility: collapse;
Un exemple sera plus parlant :
a:hover{
font-weight: bold;
}
table .duplication{
visibility: collapse;
}
table .duplication td{
padding-left: 15px;
padding-right: 15px;
}
table .duplication td a{
font-weight: bold;
}
<table> <tr> <td>Nom du championnat</td> <td>Date</td> <td>Date limite</td> </tr> <tr> <td><a href="#">Premier championnat</a></td> <td>JJ/MM/AAAA</td> <td>JJ/MM/AAAA</td> </tr> <tr> <td><a href="#">Second championnat</a></td> <td>JJ/MM/AAAA</td> <td>JJ/MM/AAAA</td> </tr> <tr class="duplication"> <td><a href="#">Premier championnat</a></td> <td>JJ/MM/AAAA</td> <td>JJ/MM/AAAA</td> </tr> <tr class="duplication"> <td><a href="#">Second championnat</a></td> <td>JJ/MM/AAAA</td> <td>JJ/MM/AAAA</td> </tr> </table>
Merci de m'avoir aidé
