table border line is removed when printing

问题

I have created an application for printing a html table, The printing application is working fine, but the problem is that the table is designed in such a way that the border line is applied using css (i can't modify anything to the styles since it was been done by other team), so when i trigger the print option that css is not applied.

My code is as given below

Can anyone please tell me some solution for this.

Working Demo

html

<table id="printTable">
    <tbody><tr>
        <th>Actions</th>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
    </tr>
    <tr>
        <td>Add/ Remove</td>
        <td>Jill</td>
        <td>Smith</td>      
        <td>50</td>
    </tr>
    <tr>
        <td>Add/ Remove</td>
        <td>Eve</td>
        <td>Jackson</td>        
        <td>94</td>
    </tr>
    <tr>
        <td>Add/ Remove</td>
        <td>John</td>
        <td>Doe</td>        
        <td>80</td>
    </tr>
    <tr>
        <td>Add/ Remove</td>
        <td>Adam</td>
        <td>Johnson</td>        
        <td>67</td>
    </tr>
</tbody></table>

<br />
<br />

<button>Print me</button>

script

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})

回答1:

try this

<table id="printTable" border="1" rules="all">

回答2:

Okkay..Thanks For Your Reply...

You Can Have To Use STYLE After

<table id="printTable">

Like This SEE HERE

OR You Can Put Style sheet in another .css file then include them after

    <table id="printTable">

I Think It Will Work For You

回答3:

You are creating a new document in a new window, without including any style sheet, so the content is displayed and printed according to browser defaults. You need to include the relevant style sheet(s) in the new document, directly in a style element (or style attributes) or indirectly via a link element.

来源：https://stackoverflow.com/questions/26397534/table-border-line-is-removed-when-printing

标签

javascript

html

css

printing