no border on HTML table when printing

前端未结

关注

 6  1852

感情败类

I\'m working on website that is supposed to print table.

One problem I\'m running into is that some table borders won\'t be printed, although they are correctly disp

相关标签:

6条回答

我寻月下人不归

2020-12-14 19:52

Try window.print() instead of printDiv() because you're not loading CSS.

updating your CSS to this

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;
}

or to this

@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;
    }
}

0 讨论(0)

夕颜

2020-12-14 19:54
Adding table-layout: fixed; fixed this issue for me. I ended up with something like below:
```
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

th,
td {
    border: 1px solid #ffffd;
    padding: 8px;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
野趣味

2020-12-14 19:56
Following up on the comment by "K D" it looks like you're not copying the CSS over to the new window. My guess is that you're doing it this way so only that specific table on the entire page is printed. There is an easier way to go about this, define a print stylesheet which negates every element except the one you want to print. No JavaScript and new windows and copying anything over is needed.
```
<link rel="stylesheet" ref="myPrintStylesheet.css" type"text/css" media="print" />
```
myPrintStylesheet.css:
```
* {
    display: none;
}

#table {
    display: block;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
醉话见心

2020-12-14 20:11

I think this other SO question, How to print inline CSS styles?, might hold the answer to your question.

Another thing to try is setting your stylesheet using the standard <link rel="stylesheet" href="stylefile.css" type="text/css" media="print" > syntax so you specify one or more media targets (just separate them with a comma).

0 讨论(0)
发布评论:

提交评论
- 加载中...

迷失自我

2020-12-14 20:12

As the table is being copied to a new window, your CSS is not being retained. You can get around this by passing some relevant CSS across to the new window in your document.write() method. You also need to provide a small amount of padding to introduce the borders. See the following JSFiddle showing this in action: 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();
}

0 讨论(0)

[愿得一人]

2020-12-14 20:14

Try this, replace YOUR.css with your link:

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 讨论(0)