Ich arbeite an einer Website, die eine Tabelle drucken soll.

Ein Problem, auf das ich stoße, ist, dass einige Tabellenränder nicht gedruckt werden, obwohl sie korrekt auf dem Bildschirm angezeigt werden.

Ich habe sowohl Firefox als auch Chrome ausprobiert. Beide zeigen alle Tabellenränder auf dem Bildschirm an, lassen jedoch beim Drucken einige der Ränder weg.

Was muss ich tun, um sie zu drucken?

EDIT 1: jsFiddle hinzugefügt:

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>