Web分页打印 细线表格+分页打印之终极攻略(转载)

最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而且要细线表格的那种，我想细线表格不是很简单吗 

如果你还不知道细线表格怎么做，请看下面的代码实现效果：） 

<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： 呵呵，此处最关键，让你的表格打印时完美无缺 

复制代码代码如下:

@media print { 

.noneprint{display:none;} 

} 

.tabPrint td 

{ 

border-left:#000000 solid 1px; 

border-top:#000000 solid 1px; 

height:21px; 

} 

table.tabPrint 

{ 

border-right:#000000 solid 1px; 

border-bottom:#000000 solid 1px; 

} 

.nextPage 

{ 

page-break-after:always; 

} 

.linetd 

{ 

border-bottom:solid 1px #000; 

} 

页面HTML如下： 

记得在thead加上style="display:table-header-group;font-weight:bold"，这样每个页面才会有都表头哟 

<div class="noneprint"> 

<div class="gTitle">>><A href="../Default.aspx" mce_href="Default.aspx">首页</A>>><A href="Default.aspx" mce_href="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" οnclick="setday(this)" style="width:80px;" />-- 

<input name="eDate" type="text" id="eDate" οnclick="setday(this)" style="width:80px;" /></td> 

<td><input type="submit" name="btnSearch" value="查询" id="btnSearch" class="Button" /> 

<input type="button" οnclick="window.print()" value="打印" class="Button" ID="Button1" NAME="Button1"></td> 

</tr> 

</table> 

</div> 

<table class='tabPrint' 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" class='nextPage'> 

<td colspan="6" class='linetd'>第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> 

呵呵，标记为红色的地方你可要看仔细哟，完不完美全靠它！

详细出处参考：http://www.jb51.net/web/10554.html

转载于:https://www.cnblogs.com/wcm_blog/archive/2010/05/10/1732011.html