How to print a table that is set to display:none

Question

0.00/5 (No votes)

See more:

I have now tried everything. My code works 100% but as soon as i set my table to hidden, the print does not work.

The page is blank and all that shows up is the header. Can any one please assist me with this as I have no idea where i am going wrong

Here is my javascript code for the print

JavaScript

function printTbl() {
       var TableToPrint = document.getElementById('Table1');
       var htmlToPrint = '' +
           '<style type="text/css">' +
               'table th, table td {' +
               'padding: 5px; ' +
               '}' +
               ' #walkheader{border-left: none!important; border-right: none!important;}' +
               ' #Table1{padding: 4px; border-collapse:collapse; font; font-size:12pt;}' +
               ' #printHeader2 td{ border-bottom: solid black 1px; border-right: solid black 1px!important; }' +
               ' td{ border-bottom: solid black 1px; border-right: solid black 1px!important; border-left: solid black 1px!important; }' +
           '</style>';
       htmlToPrint += TableToPrint.outerHTML;
       newWin = window.open("");
       newWin.document.write("<h2>Header</h2>");
       newWin.document.write(htmlToPrint);
       newWin.print();
       newWin.close();
   }

Below is my button

HTML

<a href="java<!-- no -->script:void(0);" id="printPage" >Print</a>

And then on my table

ASP.NET

<table id="Table1"  runat="server" style="display:none"> 
                    <tr  runat="server" id="printHeader1_row">
                        <td  runat="server" id="walkheader" colspan="2"></td>
                    </tr>
                    <tr style="border-bottom: solid 1px black"  runat="server" id="printHeader2">
                        <td>Time</td>
                        <td>Name and Surmane</td>
                    </tr>       </table>

For Css i have the following
<style media="print">
@media print{
table{
display:table!important
}
}
</style>

Posted 14-Jul-15 3:09am

Member 10395722

Updated 14-Jul-15 5:55am

v2

Add a Solution

Comments

F-ES Sitecore 14-Jul-15 11:22am

You can have your page use a different css file when the browser is printing. I don't know the exact specifics, but I know it can be done. If you google "use print css" you'll probably find how. So define a print css file that sents the table to display:block instead so that print devices can see it.

Member 10395722 14-Jul-15 11:56am

I have added in a css, however it still doesnt work

Richard Deeming 14-Jul-15 12:11pm

Is your <style media="print"> block in the same document as the printTbl function?

If so, it won't have any effect on the (entirely separate) document that you're opening up from that function. You need to add those styles into the htmlToPrint variable.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Prabhu Chincholikar · Answer 1 · 2015-07-14T07:09:00

Solution 2

Remove the style attribute in javascript as shown below.

var TableToPrint = document.getElementById('Table1');

document.getElementById("Table1").removeAttribute("style");

var htmlToPrint = '' +

I think it should work.

Posted 14-Jul-15 7:09am

Prabhu Chincholikar

Updated 14-Jul-15 7:11am

v2

xszaboj · Answer 2 · 2015-07-14T03:43:00

Solution 1

I think that your problem is that as soon as you set table to display:none, the table is removed from page. So your javascript code will fail on this line:

var TableToPrint = document.getElementById('Table1');

because there is not any element with this id.

Also don't define your css in javascript code if it is not really necessary.

Posted 14-Jul-15 3:43am

xszaboj

Comments

Richard Deeming 14-Jul-15 11:29am

Setting display:none hides the element; it doesn't remove it from the DOM. document.getElementById will still be able to find the element.

xszaboj 15-Jul-15 3:56am

Yes you are right, sorry I confused it with visible="false". Then the element is not rendered to page.

Member 10395722 14-Jul-15 11:56am

As Richard said, the table is still there, when i inspect the element , i can still see that table and all the columns and data in it