How to print table using Javascript

Question

I found this code to print in Javascript   function printData        var divToPrint document getElementById  printTable       newWin  window open         newWin document write divToPrint outerHTML      newWin print       newWin close        The element ID  printTable  is the ID of the table that I want to print but unfortunately it only prints out the contents of the table and not the style of the table  I just want to have borders on it so that it is easier to read in print  Can anyone help me

User · Accepted Answer

Here is your code in a jsfiddle example  I have tested it and it looks fine   http   jsfiddle net dimshik 9DbEP 4   I used a simple table  maybe you are missing some CSS on your new page that was created with JavaScript    lt table border  1  cellpadding  3  id  printTable  gt       lt tbody gt  lt tr gt           lt th gt First Name lt  th gt           lt th gt Last Name lt  th gt                 lt th gt Points lt  th gt       lt  tr gt       lt tr gt           lt td gt Jill lt  td gt           lt td gt Smith lt  td gt                 lt td gt 50 lt  td gt       lt  tr gt       lt tr gt           lt td gt Eve lt  td gt           lt td gt Jackson lt  td gt                   lt td gt 94 lt  td gt       lt  tr gt       lt tr gt           lt td gt John lt  td gt           lt td gt Doe lt  td gt                   lt td gt 80 lt  td gt       lt  tr gt       lt tr gt           lt td gt Adam lt  td gt           lt td gt Johnson lt  td gt                   lt td gt 67 lt  td gt       lt  tr gt   lt  tbody gt  lt  table gt

User · Answer

You can also use a jQuery plugin to do that  jQuery PrintPage plugin  Demo

User · Answer

One cheeky solution       function printDiv divID              Get the HTML of div         var divElements   document getElementById divID  innerHTML            Get the HTML of whole page         var oldPage   document body innerHTML            Reset the page s HTML with div s HTML only         document body innerHTML                lt html gt  lt head gt  lt title gt  lt  title gt  lt  head gt  lt body gt                divElements     lt  body gt              Print Page         window print              Restore orignal HTML         document body innerHTML   oldPage           HTML      lt form id  form1  runat  server  gt       lt div id  printablediv  style  width  100   background-color  Blue  height  200px  gt          Print me I am in 1st Div      lt  div gt       lt div id  donotprintdiv  style  width  100   background-color  Gray  height  200px  gt          I am not going to print      lt  div gt       lt input type  button  value  Print 1st Div  onclick  javascript printDiv  printablediv      gt   lt  form gt

User · Answer

My fellows   In January 2019 I used a code made before     lt script type  text javascript  gt         function imprimir             var divToPrint document getElementById  ConsutaBPM            newWin  window open              newWin document write divToPrint outerHTML           newWin print            newWin close           lt  script gt    To undestand  ConsutaBPM is a DIV which contains inside phrases and tables  I wanted to print ALL  titles  table  and others  The problem was when TRIED to print the TABLE     The table mas be defined with BORDER and CELLPADDING     lt table border  1  cellpadding  1  id  Tablbpm1   gt    It worked fine

[javascript] How to print table using Javascript?

Examples related to javascript

Examples related to html-table