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>

OriginalL'auteur user2496520 | 2014-07-04