首頁  >  文章  >  web前端  >  Web分頁列印 細線表格 分頁列印之終極攻略_HTML/Xhtml_網頁製作

Web分頁列印 細線表格 分頁列印之終極攻略_HTML/Xhtml_網頁製作

WBOY
WBOY原創
2016-05-16 16:44:061505瀏覽

最近給客戶做列印的時候,客戶提出列印時不要列印該頁面的頭,只是列印表格裡面的內容,因為頭部有背景和列印按鈕,而且要細線表格的那種,我想細線表格不是很簡單嗎
如果你還不知道細線表格怎麼做,請看下面的程式碼實現效果:)















國家級 市級
人民日報 解放日報 新民晚報


然後把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;
}
order.tabPrint
{
b0-right:000100:000 1000x 100x 100x 🎜>border-bottom:#000000 solid 1px;
}
.nextPage
{
page-break-after:always;
}
.tdline border-bottom:solid 1px #000;
}


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

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











标题: 所属街道: 录入日期: --



ID="Table2">


所屬街道
標題
錄入日期
國家級
市級


人民日報
解放日報
新民晚報



浦東新區浦三街道
測試
02-24-2009





浦東新區浦三街道
sseref
02-24-2009





浦東新區浦三街
sseref
02-24-2009





第1頁


浦東新區浦三街道
sdsedjiik
02-24-2009





浦東新區浦三街道
sdsedjiik
02-24-2009





浦東新區浦三街道
sdsedjiik
02-24-2009





浦東新區浦三街道
sdsedjiik
02-24-2009





浦東新區浦三街道
sdsedjiik
02-24-2009





呵呵,標記為紅色的地方你可要看仔細喲,完不完美全靠它!
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn