нет границы таблицы 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>
10
css html javascript

5 ответов

поскольку таблица копируется в новое окно, ваш CSS не сохраняется. Вы можете обойти это, передав некоторые соответствующие CSS в новое окно в вашем документе.метод 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();
}
17

попробовать 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;
    }
}
1

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

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

0

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

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

myPrintStylesheet.css:

* {
    display: none;
}

#table {
    display: block;
}
0

попробуйте это, замените свой.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);
0