Print Table

by Faisal Khan Janjua

HTML

<table border="1" cellpadding="3" id="printTable" style="border-collapse: collapse;">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>		
      <th>Points</th>
    </tr>
  </thead>
	<tbody>
	<tr>
		<td>Jill</td>
		<td>Smith</td>		
		<td>50</td>
	</tr>
	<tr>
		<td>Eve</td>
		<td>Jackson</td>		
		<td>94</td>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>		
		<td>80</td>
	</tr>
	<tr>
		<td>Adam</td>
		<td>Johnson</td>		
		<td>67</td>
	</tr>
</tbody></table>

<br />
<br />

<button>Print me</button>

CSS

/**
 * Print Stylesheet fuer Deinewebsite.de
* @version         1.0
* @lastmodified    16.06.2016
*/

@media print {
 
/* Inhaltsbreite setzen, Floats und Margins aufheben */
/* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */
#content, #page {
width: 100%; 
margin: 0; 
float: none;
}
    
/** Seitenränder einstellen */       
@page { margin: 2cm }

/* Font auf 16px/13pt setzen, Background auf Weiß und Schrift auf Schwarz setzen.*/
/* Das spart Tinte */
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}

h1 {
font-size: 24pt;
}

h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}    
 
/* Alle Seitenumbrüche definieren */
a {
    page-break-inside:avoid
}
blockquote {
    page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
     page-break-inside:avoid }
img { page-break-inside:avoid; 
     page-break-after:avoid; }
table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }
    
/* Linkfarbe und Linkverhalten darstellen */
a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}

a {
    page-break-inside:avoid
}

a[href^=http]:after {
      content:" <" attr(href) "> ";
}

$a:after > img {
   content: "";
}

article a[href^="#"]:after {
   content: "";
}

a:not(:local-link):after {
   content:" <" attr(href) "> ";
}
    
/**
 * Eingebundene Videos verschwinden lassen und den Whitespace der iframes auf null reduzieren.
 */
.entry iframe, ins {
    display: none;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0pt !important;
    white-space: nowrap;
}
.embed-youtube, .embed-responsive {
  position: absolute;
  height: 0;
  overflow: hidden;
}
    
/* Unnötige Elemente ausblenden für den Druck */

#header-widgets, nav, aside.mashsb-container, 
.sidebar, .mashshare-top,...

JavaScript

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

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