Web分页打印 细线表格+分页打印之终极攻略
发布时间：2020-03-20 11:49:04 所属栏目：MsSql教程 来源：站长网
导读：最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而且要细线表格的那种，我想细线表格不是很简单吗 如果你还不知道细线表格怎么做，请看下面的代码实现效果：） table cellSpacing=0 cellPa
|
最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而且要细线表格的那种，我想细线表格不是很简单吗 如果你还不知道细线表格怎么做，请看下面的代码实现效果：） <table cellSpacing=0 cellPadding=0 border=0> <tr> <td bgcolor='black'> <table cellSpacing=1 cellPadding=1 border=0> <tr align=center bgcolor='#ffffff'> <td colspan=2>国家级</td><td colspan=1>市级</td> </tr> <tr bgcolor='#ffffff' align=center> <td>人民日报</td> <td>解放日报</td> <td>新民晚报</td> </tr> </table> </td> </tr> </table> 然后把IE的设置为可以打印背景，本以为可以大功告成了 结果打印一预览，头部一个大黑块，为什么呢，因为我头部里面的有一个背景，结果占用页面！ .gTitle { width:100%; height:32px; line-height:32px; background-image:url(images/gtitle.gif); padding-left:130px; margin-bottom:10px; } 开始郁闷啦，在网上搜了半天都没有一个完美的解决方案，决定自己搞定。 自己琢磨了半天，终于搞定：） Css定义如下： noneprint： 打印时隐藏的样式定义 tabPrint： 要打印的细线表格样式定义 nextPate： 分页的样式定义 linetd： 呵呵，此处最关键，让你的表格打印时完美无缺 复制代码 代码如下:
页面HTML如下： 记得在thead加上style="display:table-header-group;font-weight:bold"，这样每个页面才会有都表头哟 <div class="noneprint"> <div class="gTitle">>><A href=http://www.jb51.net/web/"../Default.aspx" mce_href=http://www.jb51.net/web/"Default.aspx">首页</A>>><A href=http://www.jb51.net/web/"Default.aspx" mce_href=http://www.jb51.net/web/"Default.aspx">门户</A>>>信息管理</div> <table cellSpacing="0" cellPadding="2" width="100%" align="center" border="0" ID="Table1"> <tr> <td align="right">标题：</td> <td><input name="txtFName" type="text" id="txtFName" style="width:150px;" /></td> <td align="right">所属街道：</td> <td><select name="ddlStreet" id="ddlStreet"> <option selected="selected" value="">-请选择状态-</option> </select></td> <td align="right">录入日期：</td> <td colSpan="3"><input name="sDate" type="text" id="sDate" onclick="setday(this)" style="width:80px;" />-- <input name="eDate" type="text" id="eDate" onclick="setday(this)" style="width:80px;" /></td> <td><input type="submit" name="btnSearch" value="查询" id="btnSearch" class="Button" /> <input type="button" onclick="window.print()" value="打印" class="Button" ID="Button1" NAME="Button1"></td> </tr> </table> </div> <table align="center" width="95%" cellSpacing="0" cellPadding="0" border="0" ID="Table2"> <thead style="display:table-header-group;font-weight:bold" mce_style="display:table-header-group;font-weight:bold"> <tr align="center"> <td rowspan="2">所属街道</td> <td rowspan="2">标题</td> <td rowspan="2">录入日期</td> <td colspan="2">国家级</td> <td colspan="1">市级</td> </tr> <tr align="center"> <td>人民日报</td> <td>解放日报</td> <td>新民晚报</td> </tr> </thead><tbody> <tr align="center"> <td>浦东新区浦三街道</td> <td>测试</td> <td>02-24-2009</td> <td>√</td> <td>√</td> <td>√</td> </tr> <tr align="center"> <td>浦东新区浦三街道</td> <td>sseref</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>浦东新区浦三街道</td> <td>sseref</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td colspan="6">第1页</td> </tr> <tr align="center"> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> </tbody></table> 呵呵，标记为红色的地方你可要看仔细哟，完不完美全靠它！ （编辑：青岛站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
