LodoP中可以用ADD_PRINT_table、ADD_PRINT_htm、ADD_PRINT_HTML、ADD_PRINT_TBURL等可以输出超文本的表格,超文有超过打印项高度或纸张高度自动分页的特点,具体可查看本博客相关博文:LODOP中ADD_PRINT_TABLE、HTM、HTML表格自动分页测试
如上博文,ADD_PRINT_htm自动分页后,可以补线,第二页的表格上方可还存在表格线。
但是如果table标签不加border样式,所有border样式都加在td里,那么自动分页后就会出现表格线上方缺失的情况。
解决方法是在table标签里加border样式,直接在table标签里加border比较好。
用CSS样式加给table标签加border也可以,由于浏览器解析等也可能存在一些问题。
最好是:直接在table标签里加border属性。
本文三个问题:
1.table自动分页,分页后的上边缘没有边框。
2.table自动分页后线条后面有多余部分。
可直接在table标签里加border属性。<table border="1"。。。这样。
3.table中表格线没有连起来。
在table标签里加cellspacing="0" cellpadding="0"试试。
代码:
<head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /><Title>WEB打印控件LodoP</Title><script language="JavaScript" src="LodopFuncs.Js"></script></head><body><div ID="div1"><table cellspacing="0" cellpadding="0"><tr> <td>lodop</td> <td>c-lodop</td> <td>c-lodop</td></tr><tr> <td>text</td> <td>HTML</td> <td>HTML</td></tr><tr> <td>LodoP</td> <td>C_LodoP</td> <td>HTML</td></tr></table></div><div ID="div2"><table cellspacing="0" cellpadding="0" border="1"><tr> <td>lodop</td> <td>c-lodop</td> <td>c-lodop</td></tr><tr> <td>text</td> <td>HTML</td> <td>HTML</td></tr><tr> <td>LodoP</td> <td>C_LodoP</td> <td>HTML</td></tr></table></div><a href="JavaScript:prn1_prevIEw()">table分页补线</a><br><script language="JavaScript" type="text/JavaScript"> @H_419_484@var LodoP; //声明为全局变量 @H_419_484@function prn1_prevIEw() { LodoP=getLodop(); LodoP.PRINT_INIT(""); @H_419_484@var strStyle1="<style>td {border: 1 solID #000000;border-collapse:collapse; }</style>"; @H_419_484@var strStyle2="<style>table,td{border: 1 solID #000000;border-collapse:collapse; }</style>"; @H_419_484@var strHTML=strStyle1+document.getElementByID("div1").INNERHTML;//td加了border样式 @H_419_484@var strHTML2=strStyle2+document.getElementByID("div1").INNERHTML;//td和table加了CSS样式的border样式 @H_419_484@var strHTML3=strStyle1+document.getElementByID("div2").INNERHTML;//td加了border样式,table标签本身加了boder="1" LodoP.ADD_PRINT_htm(10,10,200,32,strHTML); LodoP.ADD_PRINT_htm(60,strHTML2); LodoP.ADD_PRINT_htm(120,strHTML3); LodoP.PRINT_DESIGN(); //LodoP.PREVIEW(); };</script> </body>
图示
1.只在td里加border,table不加border样式,分页后上边缘没有线。
2.在table里加CSS样式,设置border,分页后下边缘凸出有多余部分。
3.直接在table标签里加border属性,td里也加border,正常。
如果出现的不是分页后表格没有上边缘,而是单元格之间有空格,看起来像是线没有连接起来一样,这种状况:
1.可以在table标签里设置cellspacing="0" cellpadding="0"。
2.给table也加CSS的border样式。
3.给table标签直接加加border=“”,加cellspacing="0" cellpadding="0"。
如图,第一个表格table标签本身没加border,也没加cellspacing="0" cellpadding="0",只给td加样式。
有前面可知,不给tablel标签加border,会导致自动份后确实上边缘线,这个也不加cellspacing="0" cellpadding="0",导致单元格间隙,出现单元格连不起来的状况。
代码:
<head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /><Title>WEB打印控件LodoP</Title><script language="JavaScript" src="LodopFuncs.Js"></script><style>table,td {border:@H_419_484@solID 1px black;border-collapse:@H_419_484@ collapse }</style></head><body><div ID="div1"><!--<table cellspacing="0" cellpadding="0" border="1">--><table><tr> <td>lodop</td> <td>c-lodop</td> <td>c-lodop</td></tr><tr> <td>text</td> <td>HTML</td> <td>HTML</td></tr><tr> <td>LodoP</td> <td>C_LodoP</td> <td>HTML</td></tr></table></div><a href="JavaScript:prn1_prevIEw()">打印预览纯文本和超文本样式</a><br><script language="JavaScript" type="text/JavaScript"> @H_419_484@var LodoP; //声明为全局变量 @H_419_484@function prn1_prevIEw() { LodoP=getLodop(); LodoP.PRINT_INIT(""); @H_419_484@var strStyle1="<style>td {border:solID 1px black;border-collapse: collapse }</style>"; @H_419_484@var strStyle2="<style>table,td{border:solID 1px black;border-collapse: collapse }</style>"; @H_419_484@var strHTML=strStyle1+document.getElementByID("div1").INNERHTML; @H_419_484@var strHTML2=strStyle2+document.getElementByID("div1").INNERHTML; LodoP.ADD_PRINT_htm(10,strHTML2); LodoP.PRINT_DESIGN(); //LodoP.PREVIEW(); };</script> </body>
图示:
本文用了 solID 1px black;1 solID #000000;等样式,似乎哪种写法都可以,但是浏览器有些可能会不认。比如border:1 solID #000000;这个,可以查看浏览器开发者模式,看到这个属性上有叹号InvalID property value,并且页面可能无法显示,虽然lodop中有可能可以,但是建议样式用比较规范的写法。关于table的样式,以后自己会测试一些。
总结以上是内存溢出为你收集整理的LODOP中table自动分页补线加border全部内容,希望文章能够帮你解决LODOP中table自动分页补线加border所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)