JSFiddle - React, Tailwind, and code Playground
HTML
<table id="table1" class="style1" border="1" cellpadding="4" cellspacing="0">
<tr>
<th colspan="2" rowspan="2">Example Report</th>
<th colspan="12">2011</th>
<th colspan="12">2012</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
<tr>
<th rowspan="2">Batch no 1</th>
<td class="d">Integer faucibus ornare</td>
<td class="n">609.68</td>
<td class="n">380.43</td>
<td class="n">441.03</td>
<td class="n">726.00</td>
<td class="n">434.52</td>
<td class="n">461.67</td>
<td class="n">989.78</td>
<td class="n">939.43</td>
<td class="n">480.03</td>
<td class="n">346.53</td>
<td class="n">276.50</td>
<td class="n">507.50</td>
<td class="n">422.00</td>
<td class="n">998.40</td>
<td class="n">463.85</td>
<td class="n">600.59</td>
<td class="n">230.00</td>
<td class="n">321.78</td>
<td class="n">675.69</td>
<td class="n">491.66</td>
<td class="n">852.07</td>
<td class="n">423.11</td>
<td class="n">518.33</td>
<td class="n">218.66</td>
<td class="n">12809.24</td>
</tr>
<tr>
<td class="d">Etiam consequat eros</td>
<td class="n">519.11</td>
<td class="n">605.70</td>
<td class="n">69.65</td>
<td class="n">93.64</td>
<td class="n">115.81</td>
<td class="n">90.07</td>
<td class="n">883.95</td>
<td class="n">774.11</td>
<td class="n">579.04</td>
<td class="n">965.79</td>
<td class="n">382.25</td>
<td class="n">511.21</td>
<td class="n">484.46</td>
<td class="n">61.94</td>
<td class="n">253.79</td>
<td class="n">329.15</td>
<td...
JavaScript
$(function() {
$("#print-button").on("click", function() {
var table = $("#table1"),
tableWidth = table.outerWidth(),
pageWidth = 600,
pageCount = Math.ceil(tableWidth / pageWidth),
printWrap = $("<div></div>").insertAfter(table),
i,
printPage;
for (i = 0; i < pageCount; i++) {
printPage = $("<div></div>").css({
"overflow": "hidden",
"width": pageWidth,
"page-break-before": i === 0 ? "auto" : "always"
}).appendTo(printWrap);
table.clone().removeAttr("id").appendTo(printPage).css({
"position": "relative",
"left": -i * pageWidth
});
}
table.hide();
$(this).prop("disabled", true);
});
});