Dessiner une ligne au milieu d'une cellule d'un tableau

**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.

Dessiner une ligne au milieu d'une cellule d'un tableau

Tableau en CSS

Discussions similaires

Partager

Partager