v3.26 Border-Style : double - Page 1

Bonjour,

J'ai tenté d'attribué le style suivant : style="border:1px double #000;" sur une table, mais le résultat donne un tableau avec un border solid de 1 px.

Pur le résoudre, j'ai essayé de faire un table d'un border solid, avec pour chaque cellule leur border spécifique à 1px en solid avec :

<style type="text/css">
<!--

.topLeftRight{
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.topLeftBottom{
border-top:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
}
.topLeft{
border-top:1px solid #000;
border-left:1px solid #000;

}
.bottomLeft{
border-bottom:1px solid #000;
border-left:1px solid #000;
}
.topRight{
border-top:1px solid #000;
border-right:1px solid #000;
}
.bottomRight{
border-bottom:1px solid #000;
border-right:1px solid #000;
}
.topRightBottom{
border-top:1px solid #000;
border-bottom:1px solid #000;
border-right:1px solid #000;
}
-->
</style>

Seulement le résultat (ci-joint) obtenu n'est pas satisfaisant dans le sens où j'ai une coupure entre mes 2 cellules.

Avez-vous une idée pour résoudre ce problème ? Fichier joint : (resultat.jpg)

essaye avec la propriété css border-collapse

Merci encore pour cette réponse rapide. J'ai tenté un border-collapse: collapse et separate sans satisfaction. Voici le code utiliser :

<style type="text/css">
<!--

.topLeftRight{
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;

}
.topLeftBottom{
border-top:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;

}
.topLeft{
border-top:1px solid #000;
border-left:1px solid #000;

}
.bottomLeft{
border-bottom:1px solid #000;
border-left:1px solid #000;

}
.topRight{
border-top:1px solid #000;
border-right:1px solid #000;
}
.bottomRight{
border-bottom:1px solid #000;
border-right:1px solid #000;

}
.topRightBottom{
border-top:1px solid #000;
border-bottom:1px solid #000;
border-right:1px solid #000;

}
-->
</style>
<table style="width:95%;border:1px solid #000000;margin:auto;font-size:10px;border-collapse:separate;">
<tr>
<td colspan="2" class="topLeftRight" style="text-align:left;"><%champ1%></td>
</tr>
<tr>
<td class="bottomLeft" style="width:70%;border-top:1px dashed #000000;border-right:1px dashed #000000;text-align:left;"><%champ2%></td>
<td class="bottomRight" style="border-top:1px dashed #000000;text-align:left;vertical-align:top;">Date :<br /> Signature :</td>
</tr>
</table>
<br />
<table style="width:95%;border:1px solid #000000;margin:auto;font-size:10px;border-collapse:separate;">
<tr>
<td class="topLeftBottom" style="width:70%;border-right:1px dashed #000000;text-align:left;"><%champ3%></td>
<td class="topRightBottom" style="text-align:left;vertical-align:top;">Date :<br /> Signature :</td>
</tr>
</table>
<br />
<table style="width:95%;border:1px solid #000000;margin:auto;font-size:10px;border-collapse:separate;" >
<tr>
<td class="topLeftRight" style="background-color:#CCC;text-align:left;font-size:9px;color:#000;" colspan="2"><%champ4%></td>
</tr>
<tr>
<td style="width:70%;border-left:1px solid #000;border-right:1px dashed #000000;text-align:left;"><%champ5%></td>
<td style="text-align:left;vertical-align:top;border-right:1px solid #000000;">Date :<br /> Signature :</td>
</tr>
<tr>
<td style="border-top:1px dashed #000000;width:100%;font-size:10px;" colspan="2">
<table style="width:100%;padding:0;margin:0;" cellspacing="0">
<tr>
<td class="bottomLeft" style="border-right:1px dotted #000000;text-align:left;"><input type="checkbox" name="choix1"/><%champ6%> </td>
<td class="bottomRight" style="text-align:left;"><input type="checkbox" name="choix2"/><%champ7%> </td>
</tr>
</table>
</td>
</tr>
<tr>

</tr> </table>

Les balise <%XXXX%> sont des balises qui sont remplacées par du texte récupéré en base...

en fait, je ne comprends pas quel résultat tu voudrais obtenir...

Je voudrai obtenir un tableau avec une bordure double.
En html, je peux grâce à <table style="border:1px double #000"><tr><td>blabla</td></tr></table>

[PROBLEME RESOLU]

Voici la solution plus ou moins barbare qui fonctionne (du moins en affichage html, en pdf j'ai pas vérifié) : il faut dans chaque cellule insérer un tableau qui couvre tout avec un border : 1px solid #000;

<table style="width:95%;border:1px solid #000000;margin:auto;font-size:10px;">
<tr>
<td>
<table style="width:100%;margin:auto;border:1px solid #000" >
<tr>
<td colspan="2" class="topLeftRight" style="text-align:left;"><%champ1%></td>
</tr>
<tr>
<td style="width:70%;border-top:1px dashed #000000;border-right:1px dashed #000000;text-align:left;"><%champ2%></td>
<td style="border-top:1px dashed #000000;text-align:left;vertical-align:top;">Date :<br /> Signature :</td>
</tr>
</table>
</td></tr>
</table>
<br />
<table style="width:95%;border:1px solid #000000;margin:auto;font-size:10px;border-collapse:separate;">
<tr>
<td>
<table style="width:100%;margin:auto;border:1px solid #000" >
<tr>
<td class="topLeftBottom" style="width:70%;border-right:1px dashed #000000;text-align:left;"><%champ3%></td>
<td class="topRightBottom" style="text-align:left;vertical-align:top;">Date :<br /> Signature :</td>
</tr>
</table>
</td></tr>
</table>
<br />
<table style="width:95%;border:1px solid #000000;margin:auto;font-size:10px;border-collapse:separate;" >
<tr>
<td>
<table style="width:100%;margin:auto;border:1px solid #000" >
<tr>
<td class="topLeftRight" style="background-color:#CCC;text-align:left;font-size:9px;color:#000;" colspan="2"><%champ4%></td>
</tr>
<tr>
<td style="width:70%;border-right:1px dashed #000000;text-align:left;"><%champ5%></td>
<td style="text-align:left;vertical-align:top;">Date :<br /> Signature :</td>
</tr>
<tr>
<td style="border-top:1px dashed #000000;width:100%;font-size:10px;padding:0;margin:0;" colspan="2">
<table style="width:100%;padding:0;margin:0;" cellspacing="0">
<tr>
<td class="bottomLeft" style="border-right:1px dotted #000000;text-align:left;"><input type="checkbox" name="choix1"/><%champ6%> </td>
<td class="bottomRight" style="text-align:left;"><input type="checkbox" name="choix2"/><%champ7%> </td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>

Désolé de vous sollicitez à nouveau, mais l'affichage html et l'affichage PDF sont complètement différent, dans le sens où mon contenu dépasse de la page, et les table imbriquées sont plus petites que leur table principale ...

Résultat attendu (HTML) : : Fichier joint : (resultat2.jpg)

Résultat obtenu (PDF) Fichier joint : (resultatPDF.jpg)

Code HTML utilisé :

<table style="width:95%;border:1px solid #000000;margin:auto;font-size:10px;" >
<tr>
<td >
<table style="width:100%;height:100%;margin:auto;border:1px solid #000">
<tr>
<td colspan="2" style="text-align:left;"><%champ1%></td>
</tr>
<tr>
<td style="width:70%;border-top:1px dashed #000000;border-right:1px dashed #000000;text-align:left;"><%champ2%></td>
<td style="border-top:1px dashed #000000;text-align:left;vertical-align:top;">
Date :
<br />
Signature :
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table style="width:95%;border:1px solid #000000;margin:auto;font-size:10px;">
<tr>
<td>
<table style="width:100%;margin:auto;border:1px solid #000">
<tr>
<td style="width:70%;border-right:1px dashed #000000;text-align:left;"><%champ3%></td>
<td style="text-align:left;vertical-align:top;">
Date :
<br />
Signature :
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table style="width:95%;border:1px solid #000000;margin:auto;font-size:10px;">
<tr>
<td>
<table style="width:100%;margin:auto;border:1px solid #000">
<tr>
<td style="background-color:#CCC;text-align:left;font-size:9px;color:#000;" colspan="2"><%champ4%></td>
</tr>
<tr>
<td style="width:70%;border-right:1px dashed #000000;text-align:left;"><%champ5%></td>
<td style="text-align:left;vertical-align:top;">
Date :
<br />
Signature :
</td>
</tr>
<tr>
<td style="border-top:1px dashed #000000;width:100%;font-size:10px;padding:0;margin:0;" colspan="2">
<table style="width:100%;padding:0;margin:0;" cellspacing="0">
<tr>
<td class="bottomLeft" style="border-right:1px dotted #000000;text-align:left;">
<input type="checkbox" name="choix1" />
<%champ6%>
</td>
<td class="bottomRight" style="text-align:left;">
<input type="checkbox" name="choix2" />
<%champ7%>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr> </table>

Encore merci pour l'intêret que vous portez à mon problème...

petit up ?

il n'y a pas besoin de tableaux imbriqués pour faire ce résultat.

<style type="text/css">
<!--
div { margin: auto; width:95%; border:1px solid #000000; padding: 2px; }
table	{ width:100%; border:1px solid #000000; font-size:10px; border-collapse:collapse; }
.topLeftRight	{ border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;}
.topLeftBottom	{ border-top:1px solid #000; border-left:1px solid #000; border-bottom:1px solid #000; }
.topLeft		{ border-top:1px solid #000; border-left:1px solid #000; }
.bottomLeft		{ border-bottom:1px solid #000; border-left:1px solid #000; }
.topRight		{ border-top:1px solid #000; border-right:1px solid #000; }
.bottomRight	{ border-bottom:1px solid #000; border-right:1px solid #000; }
.topRightBottom	{ border-top:1px solid #000; border-bottom:1px solid #000; border-right:1px solid #000; }
-->
</style>
<div>
	<table>
		<tr>
			<td colspan="2" class="topLeftRight" style="width: 100%; text-align:left;border-bottom:1px dashed #000000">blabla blabla</td>
		</tr>
		<tr>
			<td class="bottomLeft" style="width:70%;border-right:1px dashed #000000;text-align:left;">blabla blabla</td>
			<td class="bottomRight" style="width: 30%; text-align:left;vertical-align:top;">Date :<br /> Signature :</td>
		</tr>
	</table>
</div>

Merci beaucoup, j'avai trouvé une solution mais la votre semble encore une fois plus simple et plus propre.

Encore merci