CODEWITHSUNDEEP
javascripthtmlcssprinting
Alex Man
Alex Man

Reputation: 4886

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

Upvotes: 1

Views: 2106

Answers (3)

Ghostff
Ghostff

Reputation: 1458

try this 

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

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

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.

Upvotes: 0

Istiak Tridip
Istiak Tridip

Reputation: 199

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

Upvotes: 0

Related Questions