I am trying to table print using by CSS @media print.I search this type of case every where, I found similar type of solution but it can't work.
Currently I am using Google chrome version 43.0 and FireFox 38.0.5, FireFox is repeat the thead in every pages and arranging tr lines automatically, but chorme not working on the same case.
Is it possible to print using by CSS @media print? I hope you understand what I mean and your kindly suggestion.
HTML:
<input type="button" value="Print My Account" onClick="window.print()">
<script language="javascript" type ="text/javascript" >
</script>
<div class="lftAlign">
<table class="table" id="sheet" border="1">
<thead>
<tr>
<th colspan="3">Account Holder Name: Mr. XYZ</th>
<th>From: Jan 01, 2015</th>
<th> To: Jun, 29, 2015</th>
</tr>
<tr>
<th>Date</th>
<th>Description</th>
<th>Increase</th>
<th>Decrease</th>
<th>Balance</th>
</tr>
</thead>
<tbody class="alright">
<tr>
<td>Jan, 01, 2015</td>
<td>Cash Deposit</td>
<td>$ 20,000.00</td>
<td></td>
<td>$ 20,000.00</td>
</tr>
<tr>
<td>Jan, 02, 2015</td>
<td>Cash Withdrawal</td>
<td></td>
<td>$ 5,000.00</td>
<td>$ 15,000.00</td>
</tr>
<tr>
<td>Jan, 03, 2015</td>
<td>Cash Deposit</td>
<td>$ 10,000.00</td>
<td></td>
<td>$ 25,000.00</td>
</tr>
<tr>
<td>Jan, 09, 2015</td>
<td>Cash Deposit</td>
<td>$ 1,000.00</td>
<td></td>
<td>$ 26,000.00</td>
</tr>
<tr>
<td>Feb, 05, 2015</td>
<td>Cash Withdrawal</td>
<td></td>
<td>$ 2,000.00</td>
<td>$ 24,000.00</td>
</tr>
<tr>
<td>Feb, 07, 2015</td>
<td>Cash Withdrawal</td>
<td></td>
<td>$ 5,000.00</td>
<td>$ 19,000.00</td>
</tr>
<tr>
<td>Feb, 11, 2015</td>
<td>Cash Withdrawal</td>
<td></td>
<td>$ 4,000.00</td>
<td>$ 15,000.00</td>
</tr>
<tr>
<td>Feb, 19, 2015</td>
<td>Cash Deposit</td>
<td>$ 11,500.00</td>
<td></td>
<td>$ 26,500.00</td>
</tr>
<tr>
<td>Feb, 23, 2015</td>
<td>Rent Paid</td>
<td></td>
<td>$ 1,000.00</td>
<td>$ 25,500.00</td>
</tr>
<tr>
<td>Feb, 28, 2015</td>
<td>Interest Paid</td>
<td>$ 300.00</td>
<td></td>
<td>$ 25,800.00</td>
</tr>
<tr>
<td>Mar, 01, 2015</td>
<td>Cash Deposit</td>
<td>$ 1,200.00</td>
<td></td>
<td>$ 27,000.00</td>
</tr>
<tr>
<td>Mar, 02, 2015</td>
<td>Cash Deposit</td>
<td>$ 1,000.00</td>
<td></td>
<td>$ 28,000.00</td>
</tr>
<tr>
<td>Mar, 03, 2015</td>
<td>Cash Deposit</td>
<td>$ 1,000.00</td>
<td></td>
<td>$ 29,000.00</td>
</tr>
<tr>
<td>Mar, 04, 2015</td>
<td>Cash Deposit</td>
<td>$ 11,000.00</td>
<td></td>
<td>$ 40,000.00</td>
</tr>
<tr>
<td>Mar, 05, 2015</td>
<td>Cash Deposit</td>
<td>$ 5,000.00</td>
<td></td>
<td>$ 45,000.00</td>
</tr>
<tr>
<td>Mar, 10, 2015</td>
<td>Cash Deposit</td>
<td>$ 10,000.00</td>
<td></td>
<td>$ 55,000.00</td>
</tr>
<tr>
<td>Mar, 15, 2015</td>
<td>Cash Deposit</td>
<td>$ 5,000.00</td>
<td></td>
<td>$ 60,000.00</td>
</tr>
<tr>
<td>Mar, 15, 2015</td>
<td>Rent Paid</td>
<td></td>
<td>$ 1,000.00</td>
<td>$ 59,000.00</td>
</tr>
<tr>
<td>Mar, 16, 2015</td>
<td>Cash Deposit</td>
<td>$ 3,000.00</td>
<td></td>
<td>$ 62,000.00</td>
</tr>
<tr>
<td>Mar, 18, 2015</td>
<td>Cash Deposit</td>
<td>$ 8,000.00</td>
<td></td>
<td>$ 70,000.00</td>
</tr>
<tr>
<td>Mar, 20, 2015</td>
<td>New Placement of Loan</td>
<td>$ 50,000.00</td>
<td></td>
<td>$ 120,000.00</td>
</tr>
<tr>
<td>Mar, 20, 2015</td>
<td>Purchase of Land & Building</td>
<td></td>
<td>$ 100,000.00</td>
<td>$ 20,000.00</td>
</tr>
<tr>
<td>Mar, 20, 2015</td>
<td>Loan fee</td>
<td></td>
<td>$ 2,000.00</td>
<td>$ 18,000.00</td>
</tr>
<tr>
<td>Mar, 28, 2015</td>
<td>Cash Deposit</td>
<td>$ 20,000.00</td>
<td></td>
<td>$ 38,000.00</td>
</tr>
<tr>
<td>Apr, 20, 2015</td>
<td>Instalment</td>
<td></td>
<td>$ 12,000.00</td>
<td>$ 26,000.00</td>
</tr>
<tr>
<td>May, 20, 2015</td>
<td>Instalment</td>
<td></td>
<td>$ 12,000.00</td>
<td>$ 14,000.00</td>
</tr>
<tr>
<td>Jun, 20, 2015</td>
<td>Instalment</td>
<td></td>
<td>$ 12,000.00</td>
<td>$ 2,000.00</td>
</tr>
</tbody>
</table>
</div>
CSS:
@page {
size: A4;
margin: .9cm;
}
@media print {
body.print-paper-a4 {
width: 210mm;
height: 297mm;
}
body {
background: white;
margin: 0;
padding: 0;
}
.print-stage,
.no-print {
display: none;
}
body.print-paper.a4 .print-paper {
width: 210mm;
height: 297mm;
}
.print-paper {
page-break-after: always;
margin: 0;
padding: .8cm;
border:none;
overflow: hidden;
}
}
.print-papers {
display: block;
z-index: 2000;
margin: auto;
}
body.print-paper-a4 .print-paper {
width: 21cm;
height:27cm;
}
.print-paper {
margin: auto;
background: white;
border: 1px dotted black;
box-sizing: border-box;
margin: 1cm auto;
padding: .8cm;
overflow: hidden;
}
body.print-mode .no-print-preview {
display: none;
}
body.print-mode .print-preview {
display: block;
}
And Java Script:
function PrintData() {
var printTable = document.getElementById("sheet");
win=window.open("");
win.document.write(sheet.outerHTML);
win.print();
win.close();
}
Aucun commentaire:
Enregistrer un commentaire