Tableau avec bordure suivant les balises <TH> [Résolu]

City-zen · 02/08/2011, 12h26

Bonjour
Mon tableau possède une en-tête qui a pour attribut un colspan égal à trois.

J'aimerais que les bordures de mon tableau trace uniquement les bord des th et les prolongeant à la suite du tableau.

Est-ce possible?

Merci

Gaetan_ · 02/08/2011, 12h44

Bonjour,

En css certainement mais j'ai du mal à saisir :

Citation:

les bordures de mon tableau trace uniquement les bord des th et les prolongeant à la suite du tableau.

Quels bords, tous (haut/bas/gauche/droite) ?

Qu'entends tu par "prolongeant à la suite du tableau" ?

City-zen · 02/08/2011, 14h30

Un TH contient horizontalement 3 TD.
J'aimerais donc que la bordure se trace horizontalement tout les 3 TD en prolongement du TH.
Verticalement, il y a un TH par ligne et j'aimerais que toute les lignes soient tracées.
C'est en ça que je dis que j'aimerais que les border du TH s'étendent au reste du tableau

___!------------------------------------------------------------!
TR !---------!-----TH---!-----TH----!------TH-----!----TH----!
___!------------------------------------------------------------!
TR !----TH--! TD TD TD! TD TD TD ! TD TD TD ! TD TD TD!
___!------------------------------------------------------------!
TR !----TH--! TD TD TD! TD TD TD ! TD TD TD ! TD TD TD!
___!------------------------------------------------------------!

Voilà en gros ce que je veux faire si tu arrives à comprendre.

NoSmoking · 02/08/2011, 15h54

Bonjour,
sémantiquement une TH est en tête de TABLE, pas sur toutes les lignes.

Il serait intéressant que tu nous montres la structure de TABLE, car à vue de nez le CSS va commencer à ce compliquer, mais pas sûr du tout...

Gaetan_ · 02/08/2011, 17h18

Si je comprends bien il s'agit du second <TD> qui te pose problème car seul celui là n'a pas de bordure à gauche et à droite ?

Ton tableau se créé t'il de façon dynamique ? (php par exemple)

City-zen · 02/08/2011, 17h44

Bon ben pour les plus courageux voilà le code complet.

Actuellement, je crée des espace dans un TD là ou j'aimerais que ce trace le border.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<table id="plages" border="1">
<tr>
	<th></th>
    <th colspan="4">10h</th>
    <th colspan="4">11h</th>
    <th colspan="4">12h</th>
    <th colspan="4">13h</th>
    <th colspan="4">14h</th>
    <th colspan="4">15h</th>
    <th colspan="4">16h</th>
    <th colspan="4">17h</th>
    <th colspan="4">18h</th>
    <th colspan="4">19h</th>
  </tr>
 
 
</table>

Je vous conseil de crée un fichier PHP plutôt que d'essayer de lire le code.

NoSmoking · 02/08/2011, 18h36

Citation:

Je vous conseil de crée un fichier PHP plutôt que d'essayer de lire le code.

c'est vraiment gentil, mais la moindre des choses aurait été que tu le fasses toi, comme prévu d'ailleurs dans les règles de ce forum...

je te livre un exemple à analyser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table {
  border-collapse : collapse;
}
th {
  border : 1px solid blue;
  border-left : 0px solid blue;
}
tr :first-child {
  border-left : 1px solid blue;
}
td {
  border-bottom : 1px solid blue;
}
td.droite {
  border-right : 1px solid blue;
}
</style>
</head>
<body>
<table>
  <tr>
    <th colspan="3">head #1</th>
    <th colspan="3">head #2</th>
    <th colspan="3">head #3</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td class="droite">3</td>
    <td>1</td><td>2</td><td class="droite">3</td>
    <td>1</td><td>2</td><td class="droite">3</td>
  </tr>
  <tr>
    <td>1</td><td>2</td><td class="droite">3</td>
    <td>1</td><td>2</td><td class="droite">3</td>
    <td>1</td><td>2</td><td class="droite">3</td>
  </tr>
</table>
</body>
</html>

City-zen · 03/08/2011, 11h10

Merci,

C'est exactement ce que je recherchais.

jreaux62 · 04/08/2011, 18h09

Bonjour,
savez-vous qu'il existe un tuto très clair là-dessus ? Les tableaux (XHTML & CSS)

02/08/2011, 12h26	#1
City-zen Invité de passage Inscription : juillet 2008 Messages : 28 Détails du profil Informations forums : Inscription : juillet 2008 Messages : 28 Points : 1 Points : 1	Tableau avec bordure suivant les balises <TH> Bonjour Mon tableau possède une en-tête qui a pour attribut un colspan égal à trois. J'aimerais que les bordures de mon tableau trace uniquement les bord des th et les prolongeant à la suite du tableau. Est-ce possible? Merci
	00

02/08/2011, 15h54	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, sémantiquement une TH est en tête de TABLE, pas sur toutes les lignes. Il serait intéressant que tu nous montres la structure de TABLE, car à vue de nez le CSS va commencer à ce compliquer, mais pas sûr du tout...
	00

02/08/2011, 17h18	#5
Gaetan_ Membre éprouvé Gaetan Webmaster Inscription : janvier 2007 Messages : 386 Détails du profil Informations personnelles : Nom : Gaetan Âge : 40 Localisation : France Informations professionnelles : Activité : Webmaster Secteur : Biens de consommation Informations forums : Inscription : janvier 2007 Messages : 386 Points : 441 Points : 441	Si je comprends bien il s'agit du second <TD> qui te pose problème car seul celui là n'a pas de bordure à gauche et à droite ? Ton tableau se créé t'il de façon dynamique ? (php par exemple)
	00

03/08/2011, 11h10	#8
City-zen Invité de passage Inscription : juillet 2008 Messages : 28 Détails du profil Informations forums : Inscription : juillet 2008 Messages : 28 Points : 1 Points : 1	Merci, C'est exactement ce que je recherchais.
	00

04/08/2011, 18h09	#9
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Bonjour, savez-vous qu'il existe un tuto très clair là-dessus ? Les tableaux (XHTML & CSS) __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

02/08/2011, 14h30	#3
City-zen Invité de passage Inscription : juillet 2008 Messages : 28 Détails du profil Informations forums : Inscription : juillet 2008 Messages : 28 Points : 1 Points : 1	Un TH contient horizontalement 3 TD. J'aimerais donc que la bordure se trace horizontalement tout les 3 TD en prolongement du TH. Verticalement, il y a un TH par ligne et j'aimerais que toute les lignes soient tracées. C'est en ça que je dis que j'aimerais que les border du TH s'étendent au reste du tableau ___!------------------------------------------------------------! TR !---------!-----TH---!-----TH----!------TH-----!----TH----! ___!------------------------------------------------------------! TR !----TH--! TD TD TD! TD TD TD ! TD TD TD ! TD TD TD! ___!------------------------------------------------------------! TR !----TH--! TD TD TD! TD TD TD ! TD TD TD ! TD TD TD! ___!------------------------------------------------------------! Voilà en gros ce que je veux faire si tu arrives à comprendre.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email