bordure dans table avec page-break-before

**SpaceFrog** · 23/04/2008, 10h54

J'ai un tableau avec un page-break-after=always qui me permets de ne pas couper les lignes ...
Sur la première page aucun souci,
Par contre sur les pages suivantes la première ligne perd son border top

Ce qui me trouble c'est que les bordures sotn sur les td, pas sur les tr ???

J'ai essayé de rajouter du padding du margin des border-style: double...

Code :

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

style="page-break-before:always;margin-bottom:10px;padding-bottom:10px;padding-top:10px;border-bottom-style:double;"

rien n'y fait

**le_chomeur** · 23/04/2008, 11h03

étrange je viens de tester ça :

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
 
<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr style="page-break-after:always">
    <td style="border:1px solid red;">&nbsp;</td>
  </tr>
  <tr style="page-break-after:always">
    <td style="border:1px solid red;">&nbsp;</td>
  </tr>
  <tr style="page-break-after:always">
    <td style="border:1px solid red;">&nbsp;</td>
  </tr>
</table>

Tout est ok , coté FF et ie7 les pages break ainsi que les bordure de ligne

**SpaceFrog** · 23/04/2008, 12h15

ça provient en fait d'un border-collapse...

je le mets à separate pour le media print et là j'ai bien la bordure du haut mais j'ai un esapce entre les cellules ... il existe un cell-spacing en css ?

**SpaceFrog** · 23/04/2008, 12h21

il existerait un border-spacing ?
Mais aucun reslutat !

**Er3van** · 23/04/2008, 12h23

Il ne me semble pas, mais la solution c'est plutôt de mettre un padding à un tr non ? Quitte à le mettre négatif pour le réduire.

**SpaceFrog** · 23/04/2008, 12h50

le padding négatif ne fonctionne pas non plus ...

**Er3van** · 23/04/2008, 13h17

Tu pourrais nous montrer la sortie finale en hmtl ? J'y jette un coup d'oeil entre midi et deux si j'ai le temps.

**SpaceFrog** · 23/04/2008, 14h40

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
<tbody>
<tr onmouseover="this.style.backgroundColor='salmon';" onmouseout="this.style.backgroundColor='transparent';" >
<td class="NP"><form action="FicheProspect.php" method="post"><div><input name="Go" id="Go_1" value="1a052ad11b0473387962a4feed99bacd" type="image" src="AdminPics/Modif.gif" style="cursor:pointer;" title="modifier" /><input name="NrCust" id="NrCust_1" value="1a052ad11b0473387962a4feed99bacd" type="hidden" /></div></form>
<form action="ReMailComm.php" method="post"><div><input name="Gomail" id="Gomail_1" value="1a052ad11b0473387962a4feed99bacd" type="image" src="AdminPics/Mail.gif" style="cursor:pointer;" title="Renvoyer email au commercial" /><input name="NrCust_Mail" id="NrCustMail_1" value="1a052ad11b0473387962a4feed99bacd" type="hidden" /></div></form></td>
<td class="NP" >1a052ad11b0473387962a4feed99bacd</td>
<td>Mr AAAAAAAAAA AAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAA</td>
<td>22222</td>
<td>SK. MARTIN</td>
<td>Attente</td>
<td>15-04-2008</td>
</tr>
<tr onmouseover="this.style.backgroundColor='salmon';" onmouseout="this.style.backgroundColor='transparent';" >
<td class="NP"><form action="FicheProspect.php" method="post"><div><input name="Go" id="Go_2" value="48b29d5fbf14d4177c6867c134299305" type="image" src="AdminPics/Modif.gif" style="cursor:pointer;" title="modifier" /><input name="NrCust" id="NrCust_2" value="48b29d5fbf14d4177c6867c134299305" type="hidden" /></div></form>
<form action="ReMailComm.php" method="post"><div><input name="Gomail" id="Gomail_2" value="48b29d5fbf14d4177c6867c134299305" type="image" src="AdminPics/Mail.gif" style="cursor:pointer;" title="Renvoyer email au commercial" /><input name="NrCust_Mail" id="NrCustMail_2" value="48b29d5fbf14d4177c6867c134299305" type="hidden" /></div></form></td>
<td class="NP" >48b29d5fbf14d4177c6867c134299305</td>
<td>Mr vcnb vbnbcn</td>
<td>bvcnbvcn</td>
<td>57845</td>
<td>SK. MARTIN</td>
<td><span style="color:darkgreen;">Accepté</span></td>
<td>15-04-2008</td>
</tr>
<tr onmouseover="this.style.backgroundColor='salmon';" onmouseout="this.style.backgroundColor='transparent';" >
<td class="NP"><form action="FicheProspect.php" method="post"><div><input name="Go" id="Go_3" value="4dcd30f34c91ea3e4262550bce83c8a2" type="image" src="AdminPics/Modif.gif" style="cursor:pointer;" title="modifier" /><input name="NrCust" id="NrCust_3" value="4dcd30f34c91ea3e4262550bce83c8a2" type="hidden" /></div></form>
<form action="ReMailComm.php" method="post"><div><input name="Gomail" id="Gomail_3" value="4dcd30f34c91ea3e4262550bce83c8a2" type="image" src="AdminPics/Mail.gif" style="cursor:pointer;" title="Renvoyer email au commercial" /><input name="NrCust_Mail" id="NrCustMail_3" value="4dcd30f34c91ea3e4262550bce83c8a2" type="hidden" /></div></form></td>
<td class="NP" >4dcd30f34c91ea3e4262550bce83c8a2</td>
<td>Mr zerazer zearez</td>
<td>zearzer</td>
<td>56897</td>
<td>SK. MARTIN</td>
<td>Attente</td>
<td>02-04-2008</td>
</tr>
<tr onmouseover="this.style.backgroundColor='salmon';" onmouseout="this.style.backgroundColor='transparent';" >
<td class="NP"><form action="FicheProspect.php" method="post"><div><input name="Go" id="Go_4" value="5434ba02475c7c1309f493896695c82e" type="image" src="AdminPics/Modif.gif" style="cursor:pointer;" title="modifier" /><input name="NrCust" id="NrCust_4" value="5434ba02475c7c1309f493896695c82e" type="hidden" /></div></form>
<form action="ReMailComm.php" method="post"><div><input name="Gomail" id="Gomail_4" value="5434ba02475c7c1309f493896695c82e" type="image" src="AdminPics/Mail.gif" style="cursor:pointer;" title="Renvoyer email au commercial" /><input name="NrCust_Mail" id="NrCustMail_4" value="5434ba02475c7c1309f493896695c82e" type="hidden" /></div></form></td>
<td class="NP" >5434ba02475c7c1309f493896695c82e</td>
<td>Mr  du genoux</td>
<td>dugenxou</td>
<td>15500</td>
<td>SK. MARTIN</td>
<td><span style="color:red;">Refusé</span></td>
<td>16-04-2008</td>
</tr>

**Er3van** · 23/04/2008, 15h07

En testant avec ton code, le seul espace que j'ai c'est l'espace minimal d'1px entre les cellules. C'est celui là qui te gène ? Si c'est le cas il est à ma connaissance incompressible.

Et le padding marche uniquement pour les td, erreur de ma part, sur un tr ça ne fonctionne pas.

PS : J'ai testé uniquement avec MSIE6

**SpaceFrog** · 23/04/2008, 15h31

oui c'est bien cet espace là que je supprime avec le border-collapse sur le tableau pour le média screen ...
masi en media print si j'ai le border collapse lors du saut de page la première ligne de la page suivante perd son border top

**Er3van** · 23/04/2008, 15h55

C'est effectivement un problème complexe :S

Je ne saurais malheureusement plus t'aider....

**SpaceFrog** · 23/04/2008, 16h53

A croire que j'ai toujours des problèmes qui touchent aux limites du css ...

**le_chomeur** · 23/04/2008, 17h07

si j'ai bien compris , a l'affichage , tu souhaites avoir un espace de 1 pixel entre tes lignes, mais pas a l'impression ?

si oui , essayes ça :

sur ton tableau :

cellspacing="0" cellpadding="0" ;

sur la class css de ton tableau :

ton tableau tr td{
margin-top:1px;
}

**franculo_caoulene** · 23/04/2008, 17h09

Salut,

Sous quel environnement travailles-tu? Le CSS dépanne tout au plus pour l'impression à mes yeux.
Puisque tu produis un tableau, tu peux envoyer un content-type excel dans les entêtes. Tu devrais avoir moins de problème à l'impression.
En général, je produis le fichier excel que je veux, le convertis en html puis reprend le code en y insérant le mien dans les cellules.

**SpaceFrog** · 23/04/2008, 17h22

Franc => mouarf du code html issu d'excel ...
et il est w3c valide ???

Fillot = > non ça ne marche pas mieux le cell spacing et padding, il n'y a vraiment que le border collaspe qui suprime les espsces ...

Pas grave je laisse tomber pour le moment, j'ai d'autre chats à fouetter ...
j'y reviendrais si besoin était...

Merci de vos collaborations

**franculo_caoulene** · 23/04/2008, 17h35

Je parlais de produire un fichier excel (.xls) avec du code HTML. La validité du code n'a pas lieu d'être dans ce cas puisqu'il est fait pour être compris pas excel. Ca te permet de sauvegarder le fichier et de l'imprimer exactement comme tu le souhaites.

Au final, ça dépend de l'usage que tu as de ce tableau. Si c'est pour "dépanner" et imprimer un tableau plus ou moins ressemblant à ce qu'il y a sur l'écran, ton code, même avec une bordure disparaissant, suffit.

**SpaceFrog** · 23/04/2008, 18h51

c'est pour une appli en ligne

donc exit excel ...

bordure dans table avec page-break-before

Tableau en CSS

Discussions similaires

Partager

Partager