Mettre les lignes bleues au dessus des lignes grises dans une grille de Sudoku

**[ZiP]** · 04/03/2019, 13h09

Bonjour,

Savez-vous comment faire pour que les lignes bleues soient au dessus des lignes grises dans ma grille de Sudoku ?

J'ai cherché sur Google et j'ai trouvé des informations concernant :before et :after, cependant, je n'arrive pas à le faire fonctionner.

https://jsfiddle.net/c1uj3md7/

Voici mon code source :

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
                        table.sudoku
                        {
                                border-collapse : collapse;
                        }
                        
                        .sudoku td
                        {
                                background-color: #F8F8F8;
                                border                  : 2px solid #BBB;
                                font-size               : 24px;
                                font-weight             : bold;
                                height                  : 50px;
                                text-align              : center;
                                width                   : 50px;
                        }
                        
                        .sudoku tr:nth-of-type(1) td
                        {
                                border-top              : 2px solid #369;
                        }
                        
                        .sudoku tr:nth-of-type(3n) td
                        {
                                border-bottom   : 2px solid #369;
                        }
                        
                        .sudoku td:nth-of-type(1)
                        {
                                border-left             : 2px solid #369;
                        }
                        
                        .sudoku td:nth-of-type(3n)
                        {
                                border-right    : 2px solid #369;
                        }
                        
                        
                </style>
	</head>
	<body>
		<table class="sudoku">
			<tr>
				<td>7</td>
				<td>3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>6</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td>2</td>
				<td></td>
				<td>4</td>
				<td></td>
				<td>3</td>
				<td>1</td>
				<td></td>
			</tr>
			<tr>
				<td>9</td>
				<td></td>
				<td></td>
				<td>3</td>
				<td>2</td>
				<td>5</td>
				<td>4</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td>3</td>
				<td></td>
				<td></td>
				<td></td>
				<td>9</td>
				<td>2</td>
				<td>8</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td>6</td>
				<td></td>
				<td>8</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>1</td>
				<td>4</td>
				<td>8</td>
				<td></td>
				<td></td>
				<td></td>
				<td>7</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td>1</td>
				<td>9</td>
				<td>5</td>
				<td>4</td>
				<td></td>
				<td></td>
				<td>6</td>
			</tr>
			<tr>
				<td></td>
				<td>2</td>
				<td>5</td>
				<td></td>
				<td>7</td>
				<td></td>
				<td>1</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td>9</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>3</td>
				<td>5</td>
			</tr>
		</table>
	</body>
</html>

Merci par avance pour votre aide,
ZiP

**macgawel** · 04/03/2019, 13h44

Bonjour.

A priori, c'est un problème lié au navigateur; qui "impose" un ordre pour afficher les bordures.
Il y a peut-être moyen de ruser en jouant sur la taille des bordures : si tu as une bordure à 2px et une à 3px, celle qui fait 3px passe au-dessus...

**DMC** · 18/03/2019, 19h59

Bonjour [zip],
Avec un peu de retard. C'est juste pour info au cas où.
w3c dit :
Si les styles de bordure ne diffèrent que par la couleur,
un style défini sur une cellule en gagne un sur une ligne, ce qui l'emporte sur un groupe de lignes, une colonne, un groupe de colonnes et, enfin, un tableau

Lee seul moyen code dit @macgawel c'est de mettre une bordure plus grande
par compte tu peux simplifier le Css :

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
table.sudoku{
  border-collapse : collapse;
  border              : 3px solid #369;
}
.sudoku tr td:nth-of-type(3n){
   border-right: 3px solid #336699;
}
.sudoku tr:nth-of-type(3n) td{
  border-bottom   : 3px solid #369;
}
.sudoku td{
  background-color: #F8F8F8;
  border                  : 2px solid #BBB;
  font-size               : 24px;
  font-weight             : bold;
  height                  : 50px;
  text-align              : center;
  width                   : 50px;
}

**[ZiP]** · 18/03/2019, 21h11

Bonsoir,

Je n'avais pas résolu mon problème, ce code fonctionne parfaitement bien : https://jsfiddle.net/ot0arxq5/

Merci !

ZiP

Mettre les lignes bleues au dessus des lignes grises dans une grille de Sudoku

Grille CSS (CSS Grid)

Discussions similaires

Partager

Partager