html打印表格自动分页,Web分页打印 细线表格+分页打印之终极攻略

Web分页打印 细线表格+分页打印之终极攻略

发布时间：2009-03-01 23:46:40   作者：佚名   我要评论

最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而

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

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

国家级 市级 人民日报 解放日报 新民晚报

然后把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"，这样每个页面才会有都表头哟

>> 首页>> 门户>>信息管理

标题：

所属街道：

-请选择状态-

录入日期：

--

ID="Table2">

所属街道标题录入日期国家级市级人民日报解放日报新民晚报

浦东新区浦三街道测试02-24-2009√√√浦东新区浦三街道sseref02-24-2009 浦东新区浦三街道sseref02-24-2009 第1页浦东新区浦三街道sdsedjiik02-24-2009 浦东新区浦三街道sdsedjiik02-24-2009 浦东新区浦三街道sdsedjiik02-24-2009 浦东新区浦三街道sdsedjiik02-24-2009 浦东新区浦三街道sdsedjiik02-24-2009

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

相关文章

这篇文章主要介绍了html父子页面iframe双向发消息的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-10-12

这篇文章主要介绍了如何在HTML里加载摄像头，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-29

这篇文章主要介绍了html-webpack-plugin使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-15

这篇文章主要介绍了html直接引用vue和element-ui的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-02

这篇文章主要介绍了详解HTML中字体使用line-height依然不能垂直居中解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友2020-08-20

这篇文章主要介绍了前端html换肤功能的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-20

这篇文章主要介绍了多个HTML页面共同调用一段html代码的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-17

这篇文章主要介绍了HTML中图片不存在显示默认图片的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-17

这篇文章主要介绍了HTML table行距的改变方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-07-31

这篇文章主要介绍了HTML Table 空白单元格补全的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2020-07-31

最新评论