Tableau type "morpion"

Bonjour,

je suis en train de me familiariser avec l'utilisation des feuilles des styles et je me suis donné un exercise que je ne parviens pas a resoudre par moi meme.

Mon probleme est de realiser un tableau qui n'a pas de bord haut ni bas ni droite ni gauche mais des bordure internes.

en gros je voudrais un tableau qui ressemble a ceci:
(j'ai mis des xxx pour simuler le contenu des cases mais c'est uniquement les traits qui fat regarder)

xxx|xx|xxx
----------
xxx|xx|xxx
----------
xxx|xx|xxx


pour les bordures verticale je suis parvenu a mes fin en utilisant un style sur les td qui dit bordure uniquement a gauche avec un style supplementaire qui specifie que pour la premier td de chaque ligne il n'y a pas de bord

.t_deroul tr td:first-child{
	border-left: none;
}

.morpion tr td{
	border-bottom: solid 1px #000000;
	border-left: dotted 1px #000000;
}

en revanche je n'arrive pas a appliquer la meme methode pour les traits horizontaux car je ne sais pas comment manipuler les bords d'une ligne (tr)

Si quelqu'un peut m'eclairer je lui en serait grandement reconnaissant.

Ravaza
Modifié par ravaza (06 Jul 2006 - 15:41)

Je voit que tu utilise le selecteur first-child, donc voila un code vite fait avec des last-child, mais evidemment ça ne marche pas sur IE :

css

td {
border-right:1px solid #000;
border-bottom:1px solid #000;
}
td:last-child { border-right:none; }
tr:last-child td { border-bottom:none; }

html

<table border="0" cellspacing="0">
   <tr>
	<td width="">xxx</td>
	<td width="">xxx</td>
	<td width="">xxx</td>
   </tr>
   <tr>
	<td width="">xxx</td>
	<td width="">xxx</td>
	<td width="">xxx</td>
   </tr>
   <tr>
	<td width="">xxx</td>
	<td width="">xxx</td>
	<td width="">xxx</td>
   </tr>
</table>

Et voila la solution moins fun mais multi navigateurs :

css

td {
border-right:1px solid #000;
border-bottom:1px solid #000;
}
td.last { border-right:none; }
tr.last td { border-bottom:none; }

html

<table border="0" cellspacing="0">
   <tr>
	<td width="">xxx</td>
	<td width="">xxx</td>
	<td width="" class="last">xxx</td>
   </tr>
   <tr>
	<td width="">xxx</td>
	<td width="">xxx</td>
	<td width="" class="last">xxx</td>
   </tr>
   <tr class="last">
	<td width="">xxx</td>
	<td width="">xxx</td>
	<td width="" class="last">xxx</td>
   </tr>
</table>

Toutankharton a écrit :
Je voit que tu utilise le selecteur first-child, donc voila un code vite fait avec des last-child

Bonjour,

Last-child ne fait pas partie de CSS2, mais on peut faire la même chose avec first-child : il suffit juste d'inverser.

Merci ca fonctionne tres bien et merci aussi à Alan pour la precision concernant "last-child".

Je n'avais tout simplement pas assimilé que l'on pouvait appliquer un first-child sur les cellules de la derniere ligne uniquement, j'y vois plus clair maintenant.

Je ne sais pas si je dois commencer un nouveau topic pour cela mais j'aimerai savoir s'il est possible en CSS (je sais le faire en php) d'alterner automatiquement la couluer des lignes pour avoir par exemple une ligne sur 2 orange et les autres jaunes. Je ne parle pas d'appliquer a la main des style .jaune et .orange mais d'une eventuel fonction qui detecterai tout seul l'alternance des lignes.


Autrement dis est ce que quelque chose de ce genre existe ?

tr:pair td {...}
tr:impair td {...}

Sinon peut on dire par exemple:
"la 3ème ligne uniquement sera orange" de maniere automatique ?

Autrement dis est ce que quelque chose de ce genre existe ?

tr:3 td {...}

Tout cela sera très facile... dans un futur incertain. Cela passera par la pseudo-classe nth-child().
Peut-être pourra-t-on tester cela dès Firefox 3 ? En attendant tu peux voir quelques exemples concrets en visitant cette page avec Internet Explorer 5 ou 6.

Sinon tu peux déjà faire des choses intéressantes avec les sélecteurs d'enfants adjacents notamment, mais sans IE 5 et 6...

D'ailleurs pour le tableau style morpion sans les bordures des quatre côtés, je viens de tester l'attribut « frame="void" » (qui est fait pour ça) et c'est tout à fait valide avec un Doctype strict, alors que je pensais que ça ne l'était qu'avec un Doctype transitional... Bizarre
Modifié par Alan (08 Jul 2006 - 20:44)