I have dynamic table rows. That is displayed using foreach loop. for a single page only table contents are printed. remaining contents are not printed. how to set page break in table rows using css? Please help me..
<div id="p">
<table width="100%" border="1px" id="tbl">
<% foreach (var item in Model.samplelist) {%>
<tr class="DisplayView1" align="center" >
<td class="DisplayView1" ><div class="nobrk">
<%: item.slno %></div></td>
<td ><div class="nobrk">
<%: item.insdate%></div> </td>
<td ><div class="nobrk">
<%: item.mon%></div> </td>
<td ><div class="nobrk">
<%: item.paidate%></div></td>
</tr>
<%}%></table>
</div>
<input type ="button" name="Print" value="Print" onclick="print()" />
<script type="text/javascript">
function print() {
var divToPrint = document.getElementById('p');
var popupWin = window.open('', '_blank', '');
popupWin.document.open();
popupWin.document.write('<html><head>')
popupWin.document.write('<style type="text/css">');
popupWin.document.write('@media print{');
popupWin.document.write('body{ background-color:#FFFFFF; background-image:none; color:#000000 }');
popupWin.document.write('#ad{ display:none;}');
popupWin.document.write('#leftbar{ display:none;}');
popupWin.document.write('#contentarea{ width:100%;}');
popupWin.document.write('}');
popupWin.document.write('table');
popupWin.document.write('{');
popupWin.document.write('border: none;');
popupWin.document.write('}');
popupWin.document.write('table td');
popupWin.document.write('{');
popupWin.document.write('padding: 2px;');
popupWin.document.write('border: none;');
popupWin.document.write('}');
popupWin.document.write('table th');
popupWin.document.write('{');
popupWin.document.write('padding: 6px 5px;');
popupWin.document.write('text-align: left;');
popupWin.document.write('}');
popupWin.document.write('height: 100%;');
popupWin.document.write('}');*/
popupWin.document.write('</style>');
popupWin.document.write('</head> <body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>