OVH Cloud OVH Cloud

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

3 réponses

1 2
Avatar
romer
Olivier Miakinen wrote:

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



oh que si - on est toujours plus ou moins débutant. En lisant ce matin
l'intégralité de l'article "tableau" du w3c et de yoyodesign, je me suis
senti complètement débutant.

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

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



J'ai été échaudé hier avec ce même genre de chose qu'un navigateur n'a
pas voulu reconnaitre. Je ne sais plus exactement ce que c'était.
Mais une classe sur <table> ou <tr> qui permettait d'économiser des
classes sur <td> n'a pas du tout fonctionné avec un des navigateurs (je
crois IE) - par contre en stylant td, ça marchait partout. Mais je n'ai
pas poussé l'investigation plus loin - du moment que ça marchait et vu
le temps important que j'y passe...

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.



Je suis il est vrai débutant mais cela je le savais ;-)
--
A+

Romer
Avatar
Pierre Goiffon
Bernd wrote:
Il ne s'agit évidemment pas de faire :
<table>...<td class="avec5colonnes">...<td class="avec5colonnes">...

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



J'ai été échaudé hier avec ce même genre de chose qu'un navigateur n'a
pas voulu reconnaitre.



C'est sans doute lié au sélecteur : IE n'en reconnait pas un grand
nombre ! Mais il est tout à fait possible d'arriver au résultat donné
par Olivier, sans aucun prb.
Avatar
ASM
Bernd a écrit :
Mais une classe sur <table> ou <tr> qui permettait d'économiser des
classes sur <td> n'a pas du tout fonctionné avec un des navigateurs (je
crois IE)



Non ! ça je ne puis le croire.

Quelque fois, suivant l'ordre dans lequel on déclare ses css
une chose ou l'autre peut prendre le pas sur sur une copine.
Les css reposent sur le *cascading* :-)


.table_style td { }

.style_special_tr td { }

peut nécessiter qu'on écrive :

.table_style .style_special_tr td { }

ou

.table_style tr.style_special_tr td { }
1 2