Bordure de tableau et pixel en trop

**xev74** · 20/02/2014, 16h36

Bonjour,

Je rencontre un problème sur lequel je sèche. Je fais donc appel à vos lumières !
J'ai ma bordure extérieure gauche qui dépasse de 1 pixel (rond rouge sur l'image) alors que tout est normal dans la bordure droite (rond bleu).
En zoomant, on voit clairement que la bordure de gauche "sort" du tableau générale de 1 px seulement.

Je ne comprends pas pourquoi !
Pourriez-vous me dire ce qui se passe ?

Ce code est pour une newsletter. Ca fait des heures que je teste et reteste des trucs sans succès.

Merci beaucoup

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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<body align = "top">
<custom name="opencounter" type="tracking">
<table width="100%" border="0">
	<tr>
		<td align="middle">
			<table width="550px" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
				<!-- ROW 1 -->
				<tr>
					<td colspan="5" valign="top" align="left" width="1" height="32">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" />
					</td>
				</tr>
				<!-- /ROW 1 -->
 
				<!-- ROW 2 -->
				<tr style="border-collapse:collapse;">
					<td valign="top" align="left" width="15" height="32">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/row2_col1.gif" style="vertical-align:bottom;" />
					</td>
					<td valign="top" align="left" width="103" height="32">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/row2_col2.png" style="vertical-align:bottom;" />
					</td>
					<td valign="top" align="left" width="16" height="32">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/row2_col3.png" style="vertical-align:bottom;" />
					</td>
					<td valign="top" align="left" width="110" height="32">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/row2_col4.png" style="vertical-align:bottom;" />
					</td>
					<td valign="top" align="left" width="306" height="32">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/row2_col5_test.png" style="vertical-align:bottom;" />
					</td>
				</tr>
				<!-- /ROW 2 -->
 
				<!-- ROW 3 - EDITABLE -->
				<tr style="border-collapse:collapse;">
					<td colspan="5" valign="top" align="left" width="550" style="border-collapse:collapse;">
						<!--<custom type="content" name="edit-image">-->
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/monImage.png" style="display:block; border:0" alt="" />
					</td>
				</tr>
				<!-- /ROW 3 - EDITABLE -->
 
				<!-- ROW 4 -->
				<tr>
					<td colspan="3" valign="top" align="left" width="1" height="5" style="border-left:1px solid #C0C0C0; border-top:1px solid #C0C0C0; border-collapse:collapse;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" />
					</td>
					<td colspan="2" valign="top" align="left" width="55" height="5" style="border-right:1px solid #C0C0C0; border-top:1px solid #C0C0C0;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/row4_red_line.PNG" style="display:block; border:0" />
					</td>
				</tr>
				<!-- /ROW 4 -->
 
				<!-- ROW 5 - EDITABLE -->
				<tr>
					<td colspan="3" valign="top" align="left" style="border-left:1px solid #C0C0C0; border-collapse:collapse;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" />
					</td>
					<td colspan="2" valign="top" align="left" width="55" height="5" style="border-right:1px solid #C0C0C0;">
						<!--<custom type="content" name="edit-conf-title">-->
						<br />
						<font size="6" style="font-family: verdana; letter-spacing:5px; color:#333333">
							<b>Bla blaBla blaBla blaBla bla</b>
						</font>
					</td>
				</tr>
				<!-- /ROW 5 - EDITABLE -->
 
				<!-- ROW 6 -->
				<tr>
					<td colspan="5" valign="top" align="left" height="32" style="border-left:1px solid #C0C0C0; border-right:1px solid #C0C0C0; border-collapse:collapse;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/row2_col1.gif" />
					</td>
				</tr>
				<!-- /ROW 6 -->
 
				<!-- ROW 7 - EDITABLE -->
				<tr>
					<td colspan="3" valign="top" align="left" style="border-left:1px solid #C0C0C0; border-collapse:collapse;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" />
					</td>
					<td colspan="2" valign="top" align="left" style="border-right:1px solid #C0C0C0;">
						 <!--<custom type="content" name="edit-conf-info">--> 
						<font size="4" style="font-family: verdana; word-spacing:4px; color:#ed1c2a">
							Bla blaBla blaBla blaBla bla
						</font>
						<br /><br />
						<font size="4" style="font-family: verdana; word-spacing:4px; color:#333333">
							Bla blaBla blaBla blaBla blaBla blaBla bla".
						</font>
						<br /><br />
						<a style="text-decoration: none;" href="http://google.com" title="More info" alias="Bla bla" conversion="false">
							<font size="4" style="font-family: verdana; word-spacing:4px; color:#ed1c2a">Bla bla</font>
						</a>
						<br /><br />
					</td>
				</tr>
				<!-- /ROW 7 - EDITABLE -->
 
				<!-- ROW 8 - EDITABLE -->
				<tr>
					<td colspan="3" valign="top" align="left" style="border-left:1px solid #C0C0C0; border-collapse:collapse;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" />
					</td>
					<td colspan="2" valign="top" align="left" height="35" style="border-right:1px solid #C0C0C0;">
						 <!--<custom type="content" name="edit-register">-->
						<a href="http://graduateinstitute.ch" alt="Register" style="border:0px;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/Register_bt.gif" alt="Register" border="0" />
					</td>
				</tr>
				<!-- /ROW 8 - EDITABLE -->
 
				<!-- ROW 9 -->
				<tr>
					<td colspan="5" valign="top" align="left" height="32" style="border-left:1px solid #C0C0C0; border-bottom:1px solid #C0C0C0; border-right:1px solid #C0C0C0; border-collapse:collapse;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/row2_col1.gif" />
					</td>
				</tr>
				<!-- /ROW 9 -->
 
				<!-- ROW 10 -->
				<tr>
					<td valign="top" align="left" style="border-collapse:collapse;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" />		
					</td>
					<td valign="top" align="left" width="103" style="border-collapse:collapse;">
						<br />
						<!-- Facebook -->
						<a href="http://www.facebook.com" alt="Facebook" style="border:0px; text-decoration:none;">
						<img width="22" src="http://image.exct.net/lib/fec71578746d007c/m/3/bt_facebook.png" alt="Facebook" border="0" />
						</a>
						<!-- LinkedIn -->
						<a href="http://www.linkedin.com" alt="LinkedIn" style="border:0px; text-decoration:none;">
						<img width="22" src="http://image.exct.net/lib/fec71578746d007c/m/3/bt_linkedin.png" alt="LinkedIn" border="0" />
						</a>
						<!-- Twitter -->
						<a href="http://www.twitter.com" alt="Twitter" style="border:0px; text-decoration:none;">
						<img width="22" src="http://image.exct.net/lib/fec71578746d007c/m/3/bt_tiwter.png" alt="Twitter" border="0" />
						</a>
						<!-- Youtube -->
						<a href="http://www.youtube.com" alt="Youtube" style="border:0px; text-decoration:none;">
						<img width="22" src="http://image.exct.net/lib/fec71578746d007c/m/3/bt_youtube.png" alt="Youtube" border="0" />
						</a>
					</td>
					<td valign="top" align="left" style="border-collapse:collapse;">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" />		
					</td>
					<td colspan="2" valign="top" align="left">
						<br />
						<font size="2" style="font-family: verdana; word-spacing:3px; color:#333333">
							<!--<custom type="content" name="edit-location">-->
							Adresse, <b>AdresseAdresse</b><br />
							AdresseAdresseAdresseAdresseAdresse
						</font>
					</td>
				</tr>
				<!-- /ROW 10 -->
 
				<!-- FOOTER -->
				<tr>
					<td colspan="5" align="middle" style="font-family: Verdana; font-weight: normal; font-size: 9px; color: #000000; padding: 2px">
						<p align="middle"><br />
						If you do not want to receive this newsletter, <a href="http://google.com" style="text-decoration: none; color: #e3051a;">click here</a>.<br />
						</p>
					</td>
				</tr>
				<!-- /FOOTER -->
			</table>
		</td>
	</tr>
	<!-- medias sociaux + adresse -->
 
</table>
</body>

**NoSmoking** · 21/02/2014, 13h11

Bonjour,
attention un coup tu mets une border-left un coup non

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
<tr style="border-collapse:collapse;">
  <td colspan="5" valign="top" align="left" width="550" style="border-collapse:collapse;">
    <!--<custom type="content" name="edit-image">-->
    <img src="http://image.exct.net/lib/fec71578746d007c/m/3/monImage.png" style="display:block; border:0" alt="" />
  </td>
</tr>
<!-- /ROW 3 - EDITABLE -->
<!-- ROW 4 -->
<tr>
  <td colspan="3" valign="top" align="left" width="1" height="5" style="border-left:1px solid #C0C0C0; border-top:1px solid #C0C0C0; border-collapse:collapse;">
    <img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" />
  </td>
  <td colspan="2" valign="top" align="left" width="55" height="5" style="border-right:1px solid #C0C0C0; border-top:1px solid #C0C0C0;">
    <img src="http://image.exct.net/lib/fec71578746d007c/m/3/row4_red_line.PNG" style="display:block; border:0" />
  </td>
</tr>

il te faut regarder cela de plus prêt.

**xev74** · 21/02/2014, 14h07

Il me semble que c'est normal, non ?
Je veux une bordure:
- à gauche pour les lignes 4 à 9
- à droite pour les lignes 4 à 9
- en haut pour la ligne 4
- en bas pour la ligne 10

Code :

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

1
2
3
4
5
6
7
8
9
 
<!-- ROW 3 - EDITABLE -->
  <tr style="border-collapse:collapse;">
	<td colspan="5" valign="top" align="left" width="550" style="border-collapse:collapse;">
	  <!--<custom type="content" name="edit-image">-->
	  <img src="http://image.exct.net/lib/fec71578746d007c/m/3/monImage.png" style="display:block; border:0" alt="" />
	</td>
  </tr>
<!-- /ROW 3 - EDITABLE -->

La ligne 3 ne contient aucune bordure extérieure mais je veux que l'ensemble des bordures soient collées (d'où le collapse)

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
<!-- ROW 4 -->
  <tr>
	<td colspan="3" valign="top" align="left" width="1" height="5" style="border-left:1px solid #C0C0C0; border-top:1px solid #C0C0C0; border-collapse:collapse;">
		<img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" />
	</td>
	<td colspan="2" valign="top" align="left" width="55" height="5" style="border-right:1px solid #C0C0C0; border-top:1px solid #C0C0C0;">
		<img src="http://image.exct.net/lib/fec71578746d007c/m/3/row4_red_line.PNG" style="display:block; border:0" />
	</td>
  </tr>
<!-- /ROW 4 -->
La 4ème ligne se compose de 2 colonnes.
La première avec la bordure à gauche (et en haut).
La deuxième avec la bordure à droite (et en haut).

Ce que je ne comprend pas, c'est pourquoi la ligne de gauche dépasse du tableau, alors que ça ne le fait pas à droite.

**NoSmoking** · 22/02/2014, 08h37

Il me semble que c'est normal, non ?

donc il ne faudra pas te surprendre du résultat suivant les interpréteurs.
L'opération de construction d'une TABLE n'es pas forcément la chose la plus simple à réaliser, aussi ajouter de la difficulté n'aide pas.

Lorsque sur une ligne tu affectes une border visible, la place occupée par celle ci, sur les lignes ne la faisant pas apparaître, est réservée ce qui explique ton décalage, voilà pour une explication rapide.

Ajouter une border aux autres lignes me semble la solution te permettant d'avoir le même rendu de partout (ou presque à tester quand même).

Bordure de tableau et pixel en trop

HTML

Vue hybride

Discussions similaires

Partager

Partager