ie中的html分页控制,用IE打印网页表格，实现自动分页、每页加表头

1. 建立表格样式表

.tabprint thead{

display:table-header-group;

}

.tabprint td{

border-right:1px solid black;

border-bottom:1px solid black;

}

.tabprint {

border-left:1px solid black;

/*border-top:1px solid black;*/

}

.tp_border_top td{

BORDER-TOP: black 1px solid;

BORDER-RIGHT: black 1px solid; BORDER-BOTTOM: black 1px solid;

}

第2步: .添加分页函数

//分页打印函数

function tabprintpage(ptabid){

var srctab = document.getElementById(ptabid);

for(var i=0;i

var tr=srctab.rows[i];

for(var j=0;j

if(tr.cells[j].innerText.replace(/ /g,"") == ""){

tr.cells[j].innerText = " ";　 //这里给空单元格填充一个空格，否则表格线画不出来

}

}

}

var MAX_PAGE_HEIGHT = 720;　//一页的高度，单位是象素，此处需要配置(不是恒定的值，与计算机单位象素的绝对长度有关，而不同计算机该值是不同的)

var page = 1;

var srctab = document.getElementById(ptabid);

var ohead = srctab.rows[0].getBoundingClientRect();

var tab_head_height = ohead.bottom - ohead.top;　　//计算表头高度

var prev_page_bottom = 0;　//上一页的页尾位置

for(var i=1;i

var obj = srctab.rows[i];

var oRect = obj.getBoundingClientRect();

var top = oRect.top;

var btm = oRect.bottom;

//if(page!=1){　 //不是第一页时要减去表头高度

//　　var top = oRect.top - tab_head_height;

//　　var btm = oRect.bottom - tab_head_height;

//}

var page_height = MAX_PAGE_HEIGHT;

if(page!=1){

page_height = page_height - tab_head_height;　 //只有第一页的页高要保留表头高度，其它页的页高要减表头高度

}

var mt = (top - prev_page_bottom) % page_height;

var mb = (btm - prev_page_bottom) % page_height;

/** 如果分页点落在行的起点，则在行前分页，行落在下一页 **/

if(mt==0 && top != 0 && top != prev_page_bottom){　 //当在上一行的行尾分页时，下一行的行头也会满足mt==0，所以需要判断 top != prev_page_bottom

srctab.rows[i].style.pageBreakBefore="always";

prev_page_bottom = oRect.top;

page++;

continue;

}

/** 如果分页点落在行的终点，则在行后分页，行落在当前页 **/

else if(mb == 0){

srctab.rows[i].style.pageBreakAfter="always";

prev_page_bottom = oRect.bottom;

page++;

continue;

}

var rt = (top - prev_page_bottom - mt) / page_height

var rb = (btm - prev_page_bottom - mb) / page_height

if(rt != rb){　　 /* 如果行起点与行终点不在同一页，则在行前分页，行落在下一页 */

//alert(i + " " + page + " " + prev_page_bottom + " " + oRect.top + " " + oRect.bottom)

srctab.rows[i].style.pageBreakBefore="always";

prev_page_bottom = oRect.top;

//alert(top);

//alert(btm);

page++;

continue;

}

}

srctab.style.visibility = "visible";

}

3.建立表格

车型百公里系数百公里实际里程(km)百公里考核用油(升)吨公里考核用油(升)总考核用油(升)油卡加油量(升)

...........　

3.表格标记的属性样式必须按上面提供的定义，不能更改，　否则效果会变化 4.表格必须有 　标记，当有多表头时，该标记可以包含多行， 5.表头第一行 标记要有 tp_border_top 样式 .