Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

css et largeur des cellules tableau

13 réponses
Avatar
romer
Bonsoir,

J'ai entrepris de transformer des tableaux réalisés jadis avec un soft
qui m'avait fait un code ressemblant à de la bouillie pour chat...
En CSS, après un nettoyage énergique ça marche avec en prime un code
léger et lisible par le commun des mortels.

Reste un petit pb plus esthétique que fonctionnel que je n'arrive pas à
résoudre.
Je souhaite que les colonnes soient d'égale largeur. J'ai attribué aux
tables un width de 90% mais j'ai selon les tableaux un nb variable de
colonnes (de 2 à 5).
Avec le html, j'avais donné à chaque colonne d'un tableau de 3 colonnes
un width de 30% et ça marchait mais je ne vois pas comment faire cela en
CSS.

Avez-vous une idée ?

Par avance merci.
--
A+

Romer

10 réponses

1 2
Avatar
ASM
Bernd a écrit :
> Avec le html, j'avais donné à chaque colonne d'un tableau de 3 colonnes
un width de 30% et ça marchait mais je ne vois pas comment faire cela en
CSS.



t'exactement pareil :

.tble_3_col td, .tble_3_col td { width: 33% }



<html>
<style type="text/css">

table { margin: auto; }
table td, table th { text-align: center; border: 1px solid #666 }
caption { color: red; text-align: center; margin: auto;}

.tble_3_col { width: 80%; }
.tble_3_col caption { font-size: 200% }
.tble_3_col td, .tble_3_col td { width: 33% }

</style>

<table class="tble_3_col">
<caption>table 3 colonnes largeurs égales</caption>
<tr><th> t1 </th><th> t2 </th><th> t3 </th></tr>
<tr><td> c1 </td><td> c2 </td><td> c3 </td></tr>
<tr><td> c1 </td><td> c2 </td><td>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed purus
pede, consequat a, mattis non, luctus id, eros. Donec sapien. Mauris
pretium. Sed nonummy
</td></tr>
</table>
<table>
<caption>table 3 colonnes largeurs libres</caption>
<tr><th> t1 </th><th> t2 </th><th> t3 </th></tr>
<tr><td> c1 </td><td> colonne 2 </td><td> c3 </td></tr>
</table>
</html>
Avatar
romer
ASM wrote:

> Avec le html, j'avais donné à chaque colonne d'un tableau de 3 colonnes
un width de 30% et ça marchait mais je ne vois pas comment faire




cela en
CSS.



t'exactement pareil :

.tble_3_col td, .tble_3_col td { width: 33% }



On ne s'est pas bien compris ou je n'ai pas compris ta réponse.
L'exemple que je donne est bien pour 3 colonnes et est facile à réaliser
quand on connait le nb de colonnes. Mais j'ai bien précisé que je ne
connais pas à priori le nb de colonnes de tous les tableaux que
j'emploie et que j'emploierai. Seulement que c'est et sera entre 2 et 5
colonnes.
Donc la question : existe-t-il dans ce cas une manière d'obtenir un
résultat satisfaisant ?

Entre-temps j'ai réfléchi et comme la largeur des tableaux est
systématiquement de 90% de la largeur d'écriture, j'ai fait comme si
j'avais toujours 5 colonnes - donc un width de 18% dans le CSS.
Et bien ça l'air de marcher sans que je sache pourquoi - les colonnes
sont - apparemment - de même largeur quel que soit leur nombre mais
commme c'est empirique à souhait, je ne sais pas si ça va marcher avec
la plupart des navigateurs (j'utilise safari) - va falloir tester mais
apparemment ça colle.

Cela dit, je ne fais pas trop confiance à cette méthode et demande s'il
en existe une autre éprouvée ?
--
A+

Romer
Avatar
Olivier Miakinen
Le 20/09/2006 19:36, Bernd a écrit :

J'ai entrepris de transformer des tableaux réalisés jadis avec un soft
qui m'avait fait un code ressemblant à de la bouillie pour chat...
En CSS, après un nettoyage énergique ça marche avec en prime un code
léger et lisible par le commun des mortels.

Reste un petit pb plus esthétique que fonctionnel que je n'arrive pas à
résoudre.
Je souhaite que les colonnes soient d'égale largeur. J'ai attribué aux
tables un width de 90% mais j'ai selon les tableaux un nb variable de
colonnes (de 2 à 5).
Avec le html, j'avais donné à chaque colonne d'un tableau de 3 colonnes
un width de 30% et ça marchait mais je ne vois pas comment faire cela en
CSS.

Avez-vous une idée ?



Tu n'as strictement aucun contrôle sur le HTML, et seulement sur les
définitions CSS ? Si oui, je n'ai pas d'idée. Sinon, j'en ai deux :

1) Rajouter un nom de classe, par exemple de class="avec2colonnes" à
class="avec5colonnes", et multiplier les définitions CSS.

2) Rajouter <colgroup span="2" width="1*"> (modifier la valeur de span
selon le nombre de colonnes).
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Bernd nous narre ce qui suit en ce 21/09/2006 9:30 :

Entre-temps j'ai réfléchi et comme la largeur des tableaux est
systématiquement de 90% de la largeur d'écriture, j'ai fait comme si
j'avais toujours 5 colonnes - donc un width de 18% dans le CSS.
Et bien ça l'air de marcher sans que je sache pourquoi - les colonnes
sont - apparemment - de même largeur quel que soit leur nombre mais
commme c'est empirique à souhait, je ne sais pas si ça va marcher avec
la plupart des navigateurs (j'utilise safari) - va falloir tester mais
apparemment ça colle.



Cela me paraît normal : une boîte ne s'affiche que si elle contient ...
un contenu, me semble-t'il.
Sauf si tu ajoutes une règle "display" (block, cell, table ou autre)

Cela dit, je ne fais pas trop confiance à cette méthode et demande s'il
en existe une autre éprouvée ?



Je passe.

Cordialement,
--
docanski

- Les Côtes du nord de la Bretagne par le sentier des douaniers
- Memento des champignons : le guide le plus complet du Web
- Et d'autres sujets encore sur ----> http://armorance.free.fr
Avatar
ASM
Bernd a écrit :
ASM wrote:

Avec le html, j'avais donné à chaque colonne d'un tableau de 3 colonnes
un width de 30% et ça marchait mais je ne vois pas comment faire




cela en
CSS.


t'exactement pareil :



.tble_3_col td, .tble_3_col td { width: 33% }



On ne s'est pas bien compris ou je n'ai pas compris ta réponse.
L'exemple que je donne est bien pour 3 colonnes et est facile à réaliser
quand on connait le nb de colonnes.



Moi je réponds à ce que tu dis (cf + haut) et que je ne pense pas avoir
inventé.

Mais j'ai bien précisé que je ne
connais pas à priori le nb de colonnes de tous les tableaux que
j'emploie et que j'emploierai. Seulement que c'est et sera entre 2 et 5
colonnes.
Donc la question : existe-t-il dans ce cas une manière d'obtenir un
résultat satisfaisant ?



Que je sache ça n'existe pas en html.
Enfin ... les colonnes se répartissent automatiquement au mieux des
contenus des tds.
Si on ne style pas les tds ça continue à fonctionner pareil.
On peut en html leur donner une largeur proportionnelle.
En css c'est donc tout comme en html.
Si on style les tds comme en html ça continue à fonctionner pareil.

Entre-temps j'ai réfléchi et comme la largeur des tableaux est
systématiquement de 90% de la largeur d'écriture, j'ai fait comme si
j'avais toujours 5 colonnes - donc un width de 18% dans le CSS.
Et bien ça l'air de marcher sans que je sache pourquoi - les colonnes
sont - apparemment - de même largeur quel que soit leur nombre



Ça alors ! Mais oui !
(Firefox, IE Mac )

Cela dit, je ne fais pas trop confiance à cette méthode et demande s'il
en existe une autre éprouvée ?



http://www.yoyodesign.org/doc/w3c/css2/visuren.html
http://www.yoyodesign.org/doc/w3c/css2/tables.html#value-def-table-column
Avatar
romer
docanski wrote:

Cela me paraît normal : une boîte ne s'affiche que si elle contient ...
un contenu, me semble-t'il.
Sauf si tu ajoutes une règle "display" (block, cell, table ou autre)



La question n'est pas d'afficher du contenu mais que les colonnes soient
d'égale largeur dans tous les cas (ou au pis-aller dans la plupart)
quand on utilise des tableaux à plusieurs de colonnes (de 2 à 5
généralement).
--
A+

Romer
Avatar
romer
Olivier Miakinen wrote:

1) Rajouter un nom de classe, par exemple de class="avec2colonnes" à
class="avec5colonnes", et multiplier les définitions CSS.



C'est bien ce que faisait mais dans un long tableau, on obtient un
chapelet de définition et de classes qui se répètent sur les td - c'est
un peu cela que je voulais éviter pour alléger l'ensemble et faire dans
la pureté du code.

2) Rajouter <colgroup span="2" width="1*"> (modifier la valeur de span
selon le nombre de colonnes).



Là je ne vois pas bien comment ça fonctionne mais vais étudier la
question à la lulmière ds liens qui viennent de m'être fournis par un
autre participant.

Merci à vous tous.
--
A+

Romer
Avatar
ASM
Bernd a écrit :
à la lulmière ds liens qui viennent de m'être fournis par un
autre participant.



http://stephane.moriaux.perso.orange.fr/truc/table_1-3.htm
Avatar
Olivier Miakinen
Le 21/09/2006 20:01, Bernd a écrit :

1) Rajouter un nom de classe, par exemple de class="avec2colonnes" à
class="avec5colonnes", et multiplier les définitions CSS.



C'est bien ce que faisais mais dans un long tableau, on obtient un
chapelet de définition et de classes qui se répètent sur les td - c'est
un peu cela que je voulais éviter pour alléger l'ensemble et faire dans
la pureté du code.



Oh ! Je croyais que tu n'étais plus un débutant en CSS.


Il ne s'agit évidemment pas de faire :
<table>...<td class="avec5colonnes">...<td class="avec5colonnes">...

Mais :
<table class="avec5colonnes">...<td>...<td>...<td>...


Et dans le CSS, tu n'as pas :
table td.avec5colonnes { width: 18%; }

Mais :
table.avec5colonnes td { width: 18%; }


Ça fait partie des bases de CSS, qu'il est bon de rappeler de temps en
temps.
Avatar
ASM
Olivier Miakinen a écrit :

Oh ! Je croyais que tu n'étais plus un débutant en CSS.



Moi aussi.

table.avec5colonnes td { width: 18%; }

Ça fait partie des bases de CSS, qu'il est bon de rappeler de temps en
temps.



dont démo déjà donnée :
http://stephane.moriaux.perso.orange.fr/truc/table_1-3.htm

--
ASM
1 2