pas de frontière sur la table HTML lors de l'impression

Je travaille sur un site web qui est censé imprimer table.

Un problème, je suis en cours d'exécution en est que certaines bordures de tableau ne seront pas imprimées, même si elles sont correctement affichés sur l'écran.

J'ai essayé Firefox et Chrome. Afficher toutes les bordures du tableau à l'écran, mais omettre certains des frontières lors de l'impression.

Que dois-je faire pour les faire imprimer?

EDIT 1: Ajout de jsFiddle:

http://jsfiddle.net/Ax4qU/

Code:

JavaScript:

function printDiv()
{
  var divToPrint=document.getElementById('table');
  newWin= window.open("");
  newWin.document.write(divToPrint.outerHTML);
  newWin.print();
  newWin.close();
}

CSS:

<style type="text/css">
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
margin: 0;
padding: 0;
font: 12px/15px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #555;
background: #f5f5f5 url(bg.jpg);
}
a {
color: #666;
}
#content {
width: 65%;
max-width: 690px;
margin: 6% auto 0;
}
table {
overflow: hidden
border: 1px solid #d3d3d3;
background: #fefefe;
width: 70%;
margin: 5% auto 0;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
th, td {
padding: 18px 28px 18px;
text-align: center;
}
th {
padding-top: 22px;
text-shadow: 1px 1px 1px #fff;
background: #e8eaeb;
}
td {
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
tr.odd-row td {
background: #f6f6f6;
}
td.first, th.first {
text-align: left
}
td.last {
border-right: none;
}
/*
Background gradients are completely unnecessary but a neat effect.
*/
td {
background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
tr.odd-row td {
background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
th {
background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
tr:first-child th.first {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px; /* Saf3-4 */
}
tr:first-child th.last {
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px; /* Saf3-4 */
}
tr:last-child td.first {
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px; /* Saf3-4 */
}
tr:last-child td.last {
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px; /* Saf3-4 */
}
</style>
Lors de l'impression de la DIV contenu dans l'autre fenêtre, êtes-vous sûr que ces tous les css sont également copiés dans que?
Je ne pense pas. J'ouvre une nouvelle fenêtre juste à imprimer table

OriginalL'auteur user2496520 | 2014-07-04

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *