web打印表格跨页问题

在WEB中生成一个动态表格。调用IE内置的打印控件打印。 
由于表格内容长度不固定，遇到跨页时出现了断行现象（一行内容断开了，一半在前一页，一半在后页）。 
如何做才能实现像Word中打印表格那样 跨页自动换行 ？也就是说如果前一页面的最后一行显示不下， 
则将这行自动移动到下一页，而不是断开

解决方案 »

  1.   

    我想是这样的，如果当前页面就这么多数据，那么打印只可能打印这么多，不可能把剩余部分也打印出来。
    你可以这样做：
    既然是动态表格，假设你是用的asp.net，那么你可以设置gridview或者repeater的长度，就是设置能一张纸打印出来的那个长度。
      

  2.   

    在<head />中加一段
    <style media="print" type="text/css"> 
    .nextpage{page-break-after: always;} 
    </style> 然后给一页的最后一个<td>加上class="nextpage" 
      

  3.   

    本来第一页要打印，但由于第一页字符比较多，所以第一页就分成两页打印了，关键是表格被拆开了，能否将表格封闭起来（也就是打印第一页的下面和打印第二页的上面）
    打印预览效果图：[code]
    <html>
    <head>
    <title>看看</title>
    <meta http-equiv="Content-Type" c>
    <!--media=print 这个属性可以在打印时有效-->
    <style media=print>
    .Noprint{display:none;}
    .PageNext{page-break-after: always;}
    </style><style>
     
    .tdp
    {
    border-bottom: 1 solid #000000;
    border-left: 1 solid #000000;
    border-right: 0 solid #ffffff;
    border-top: 0 solid #ffffff;
    }
    .tabp
    {
    border-color: #000000 #000000 #000000 #000000;
    border-style: solid;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    }
    .NOPRINT {
    font-family: "宋体";
    font-size: 9pt;
    }</style></head><body >
    <center class="Noprint" >
    <p>
    <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>
    </OBJECT>
    <input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)>
    <input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6)>
    <input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1)>
    </p>
    <p> <input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1)>
    <br/>
    </p>
    <hr align="center" width="90%" size="1" noshade>
    </center><table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">
    <tr>
    <td colspan="3" class="tdp">第1页</td>
    </tr>
    <tr>
    <td width="29%" class="tdp">&nbsp;</td>
    <td width="28%" class="tdp">&nbsp;</td>
    <td width="43%" class="tdp">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3" class="tdp">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3" class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="50%" class="tdp"><p>这样的报表</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    </td>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table>
    <hr align="center" width="90%" size="1" noshade class="NOPRINT" >
    <!--分页-->
    <div class="PageNext"></div>
    <table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">
    <tr>
    <td class="tdp">第2页</td>
    </tr>
    <tr>
    <td class="tdp">看到分页了吧</td>
    </tr>
    <tr>
    <td class="tdp">&nbsp;</td>
    </tr>
    <tr>
    <td class="tdp">&nbsp;</td>
    </tr>
    <tr>
    <td class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="50%" class="tdp"><p>这样的报表</p>
    <p>对一般的要求就够了。</p></td>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>
    </html>[/code]
      

  4.   

    代码如下：<html>
    <head>
    <title>看看</title>
    <meta http-equiv="Content-Type" c>
    <!--media=print 这个属性可以在打印时有效-->
    <style media=print>
    .Noprint{display:none;}
    .PageNext{page-break-after: always;}
    </style><style>
     
    .tdp
    {
    border-bottom: 1 solid #000000;
    border-left: 1 solid #000000;
    border-right: 0 solid #ffffff;
    border-top: 0 solid #ffffff;
    }
    .tabp
    {
    border-color: #000000 #000000 #000000 #000000;
    border-style: solid;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    }
    .NOPRINT {
    font-family: "宋体";
    font-size: 9pt;
    }</style></head><body >
    <center class="Noprint" >
    <p>
    <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>
    </OBJECT>
    <input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)>
    <input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6)>
    <input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1)>
    </p>
    <p> <input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1)>
    <br/>
    </p>
    <hr align="center" width="90%" size="1" noshade>
    </center><table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">
    <tr>
    <td colspan="3" class="tdp">第1页</td>
    </tr>
    <tr>
    <td width="29%" class="tdp">&nbsp;</td>
    <td width="28%" class="tdp">&nbsp;</td>
    <td width="43%" class="tdp">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3" class="tdp">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3" class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="50%" class="tdp"><p>这样的报表</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    <p>对一般的要求就够了。</p>
    </td>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table>
    <hr align="center" width="90%" size="1" noshade class="NOPRINT" >
    <!--分页-->
    <div class="PageNext"></div>
    <table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">
    <tr>
    <td class="tdp">第2页</td>
    </tr>
    <tr>
    <td class="tdp">看到分页了吧</td>
    </tr>
    <tr>
    <td class="tdp">&nbsp;</td>
    </tr>
    <tr>
    <td class="tdp">&nbsp;</td>
    </tr>
    <tr>
    <td class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="50%" class="tdp"><p>这样的报表</p>
    <p>对一般的要求就够了。</p></td>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>
    </html>