Dessiner une ligne au milieu d'une cellule d'un tableau [Résolu]

rambc · 22/11/2010, 17h07

Bonjour;
j'aimerais donc dessiner une ligne au milieu d'une cellule d'un tableau et sur toute la hauteur de cette cellule. Bien entendu, je ne peux pas partager la cellule en deux cellules du tableau.

adiGuba · 22/11/2010, 17h45

Salut,

Le plus simple serait d'utiliser une background-image, avec une image d'un pixel (ou plus si besoin) que tu étirerais sur toute la largeur de la cellule :

Code :

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

background: url(dot.jpg) repeat-x 0 50%;

a++

rambc · 22/11/2010, 21h23

Merci.

rambc · 23/11/2010, 18h18

Bonsoir,
en fait j'ai un souci avec le code suivant :

Code html :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <style>
            td.lineFold{
                background: url(lineFolding.png) repeat-y 50% 50%;
            }
        </style>
    </head>
 
    <body>
        <div>
Un petit exemple de listing....
        </div>
        <code>
            <table class="listing">
                <tr class="fold_start_opened level_0">
                    <td><pre>01</pre></td>
                    <td class="symbolFold" style="cursor:pointer;"><pre> - </pre></td>
                    <td><pre>def function(bidon):</pre></td>
                </tr>
                <tr>
                    <td><pre>02</pre></td>
                    <td class="lineFold"></td>
                    <td><pre>    """</pre></td>
                </tr>
                <tr>
                    <td><pre>03</pre></td>
                    <td class="lineFold"></td>
                    <td><pre>    Un petit commentaire...</pre></td>
                </tr>
                <tr>
                    <td><pre>04</pre></td>
                    <td class="lineFold"></td>
                    <td><pre>    """</pre></td>
                </tr>
                <tr>
                    <td><pre>05</pre></td>
                    <td class="lineFold"></td>
                    <td></td>
                </tr>
                <tr>
                    <td><pre>06</pre></td>
                    <td class="lineFold"></td>
                    <td><pre>    print('Cette fonction est bidon...')</pre></td>
                </tr>
                <tr class="fold_start_opened level_1">
                    <td><pre>07</pre></td>
                    <td class="symbolFold" style="cursor:pointer;"><pre> - </pre></td>
                    <td><pre>    for i in range(5):</pre></td>
                </tr>
                <tr>
                    <td><pre>08</pre></td>
                    <td class="lineFold"></td>
                    <td><pre>        print(i)</pre></td>
                </tr>
                <tr class="fold_end level_1">
                    <td><pre>09</pre></td>
                    <td class="lineFold"></td>
                    <td><pre>        print(i**2)</pre></td>
                </tr>
                <tr>
                    <td><pre>10</pre></td>
                    <td class="lineFold"></td>
                    <td><pre># Une autre boucle...</pre></td>
                </tr>
                <tr class="fold_start_opened level_1">
                    <td><pre>11</pre></td>
                    <td class="symbolFold" style="cursor:pointer;"><pre> - </pre></td>
                    <td><pre>    for k in range(5):</pre></td>
                </tr>
                <tr>
                    <td><pre>12</pre></td>
                    <td class="lineFold"></td>
                    <td><pre>        print('='*k)</pre></td>
                </tr>
                <tr>
                    <td><pre>13</pre></td>
                    <td class="lineFold"></td>
                    <td><pre># Un test dans une boucle...</pre></td>
                </tr>
                <tr class="fold_start_opened level_2">
                    <td><pre>14</pre></td>
                    <td class="symbolFold" style="cursor:pointer;"><pre> - </pre></td>
                    <td><pre>        if k == 5:</pre></td>
                </tr>
                <tr class="fold_end level_1">
                    <td><pre>15</pre></td>
                    <td class="lineFold"></td>
                    <td><pre>            print('OK !')</pre></td>
                </tr>
                <tr>
                    <td><pre>16</pre></td>
                    <td class="lineFold"></td>
                    <td><pre># Fin du code...</pre></td>
                </tr>
                <tr class="listing_end">
                    <td><pre>17</pre></td>
                    <td class="lineFold"></td>
                    <td><pre># Ou presque...</pre></td>
                </tr>
            </table>
        </code>
        <div>
C'est fini !!!
        </div>
    </body>
</html>

Il y a bien une ligne verticale au milieu de chaque cellule de classe "lineFold". Par contre, chaque ligne verticale est coupée par un trou blanc. Ceci doit correspondre aux lignes horizontales non tracées du tableau.

Peut-on réparer ceci ?

ornitho13 · 24/11/2010, 17h02

Salut,

oui tu peux réparer cela, il me semble qu'en ajoutant 2 attributs à ton tableau, cela devrait suffire.

Exemple

Code html :

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

1
2
 
<table cellspacing="0" cellpadding="0">...</table>

Je crois même que tu peux omettre le cellpadding, car cela gère le padding des cellules alors que le cellspacing gère l'espace entre les cellules d'une <table>.

++

rambc · 24/11/2010, 17h58

Merci.

Effectivement, le "cellspacing" seul fonctionne.

22/11/2010, 17h07	#1
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Dessiner une ligne au milieu d'une cellule d'un tableau Bonjour; j'aimerais donc dessiner une ligne au milieu d'une cellule d'un tableau et sur toute la hauteur de cette cellule. Bien entendu, je ne peux pas partager la cellule en deux cellules du tableau.
	00

22/11/2010, 17h45	#2
adiGuba Rédacteur/Modérateur Développeur Java/Web Inscription : avril 2002 Messages : 12 460 Détails du profil Informations personnelles : Sexe : Localisation : France, Corse (Corse) Informations professionnelles : Activité : Développeur Java/Web Secteur : Transports Informations forums : Inscription : avril 2002 Messages : 12 460 Points : 19 447 Points : 19 447	Salut, Le plus simple serait d'utiliser une background-image, avec une image d'un pixel (ou plus si besoin) que tu étirerais sur toute la largeur de la cellule : Code : Sélectionner tout - Visualiser dans une fenêtre à part background: url(dot.jpg) repeat-x 0 50%; a++ __________________ adiGuba [ tutoriels \| blog \| twitter ] Rédacteur/Modérateur Java Présentation de Java SE 7 (commentaires)
	00

22/11/2010, 21h23	#3
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Merci.
	00

24/11/2010, 17h58	#6
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Merci. Effectivement, le "cellspacing" seul fonctionne.
	00

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