Нет рамки на таблице HTML при печати

Я работаю над веб-сайтом, который должен печатать таблицу.

Одна проблема, с которой я сталкиваюсь, заключается в том, что некоторые границы таблицы не будут напечатаны, хотя они правильно отображаются на экране.

Я попробовал как Firefox, так и Chrome. Оба отображают все границы таблицы на экране, но опускают некоторые границы при печати.

Что мне нужно сделать, чтобы напечатать их?

РЕДАКТИРОВАТЬ 1: Добавлен jsFiddle:

http://jsfiddle.net/Ax4qU/

код:

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>

Ответ 1

Поскольку таблица копируется в новое окно, ваш CSS не сохраняется. Вы можете обойти это, передав некоторый релевантный CSS в новое окно в вашем методе document.write(). Вы также должны предоставить небольшое количество отступов, чтобы ввести границы. Смотрите следующий JSFiddle, показывающий это в действии: http://jsfiddle.net/826Zm/3/

function printDiv() {
    var divToPrint = document.getElementById('table');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding:0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
}

Ответ 2

Попробуйте window.print() вместо printDiv(), потому что вы не загружаете CSS.

или

обновление вашего CSS к этому

table {
    border: solid #000 !important;
    border-width: 1px 0 0 1px !important;
}
th, td {
    border: solid #000 !important;
    border-width: 0 1px 1px 0 !important;
}

или к этому

@media print {
    table {
        border: solid #000 !important;
        border-width: 1px 0 0 1px !important;
    }
    th, td {
        border: solid #000 !important;
        border-width: 0 1px 1px 0 !important;
    }
}

Ответ 3

Я думаю, что этот другой вопрос SO, Как напечатать встроенные стили CSS?, может содержать ответ на ваш вопрос.

Еще одна вещь, которую нужно попробовать - установить таблицу стилей с помощью стандартного синтаксиса <link rel="stylesheet" href="stylefile.css" type="text/css" media="print" >, чтобы указать один или несколько целевых объектов мультимедиа (просто разделите их запятой).

Ответ 4

Следуя комментарию "K D", похоже, что вы не копируете CSS в новое окно. Я предполагаю, что вы делаете это так, чтобы печаталась только та таблица на всей странице. Существует более простой способ сделать это, определить таблицу стилей печати, которая сводит на нет все элементы, кроме тех, которые вы хотите распечатать. Нет необходимости в JavaScript и новых окнах и копировании.

<link rel="stylesheet" ref="myPrintStylesheet.css" type"text/css" media="print" />

myPrintStylesheet.css:

* {
    display: none;
}

#table {
    display: block;
}

Ответ 5

Попробуйте это, замените YOUR.css ссылкой:

function printDiv() {
var strHtml = "<html>\n<head>\n <link rel=\"stylesheet\" type=\"text/css\" href=\"YOUR.css\">\n</head><body><div style=\"testStyle\">\n" + document.getElementById('table').innerHTML + "\n</div>\n</body>\n</html>";
newWin = window.open("");
newWin.document.writeln(strHtml);
newWin.print();
newWin.close();
}

document.getElementById('printbtn').addEventListener('click', printDiv);