| 标题 | Web分页打印 细线表格+分页打印之终极攻略 |
| 内容 | 最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而且要细线表格的那种，我想细线表格不是很简单吗 如果你还不知道细线表格怎么做，请看下面的代码实现效果：） <table cellSpacing=0 cellPadding=0 border=0> <tr> <td bgcolor='black'> <table cellSpacing=1 cellPadding=1 border=0> <tr bgcolor='#ffffff'> <td colspan=2>国家级</td><td colspan=1>市级</td> </tr> <tr bgcolor='#ffffff'> <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> <div>>><A href="../Default.aspx" mce_href="Default.aspx">首页</A>>><A href="Default.aspx" mce_href="Default.aspx">门户</A>>>信息管理</div> <table cellSpacing="0" cellPadding="2" ID="Table1"> <tr> <td>标题：</td> <td><input name="txtFName" type="text" id="txtFName" /></td> <td>所属街道：</td> <td><select name="ddlStreet" id="ddlStreet"> <option selected="selected" value="">-请选择状态-</option> </select></td> <td>录入日期：</td> <td colSpan="3"><input name="sDate" type="text" id="sDate" onclick="setday(this)" />-- <input name="eDate" type="text" id="eDate" onclick="setday(this)" /></td> <td><input type="submit" name="btnSearch" value="查询" id="btnSearch" /> <input type="button" onclick="window.print()" value="打印" ID="Button1" NAME="Button1"></td> </tr> </table> </div> <table class='tabPrint' width="95%" cellSpacing="0" cellPadding="0" ID="Table2"> <thead mce_style="display:table-header-group;font-weight:bold"> <tr> <td rowspan="2">所属街道</td> <td rowspan="2">标题</td> <td rowspan="2">录入日期</td> <td colspan="2">国家级</td> <td colspan="1">市级</td> </tr> <tr> <td>人民日报</td> <td>解放日报</td> <td>新民晚报</td> </tr> </thead><tbody> <tr> <td>浦东新区浦三街道</td> <td>测试</td> <td>02-24-2009</td> <td>√</td> <td>√</td> <td>√</td> </tr> <tr> <td>浦东新区浦三街道</td> <td>sseref</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>浦东新区浦三街道</td> <td>sseref</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr class='nextPage'> <td colspan="6" class='linetd'>第1页</td> </tr> <tr> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>浦东新区浦三街道</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> </tbody></table> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。