zoukankan      html  css  js  c++  java
  • LODOP中tfoot和tbody中间线连不起来

    这种情况发生在使用ADD_PRINT_TABLE时,ADD_PRINT_TABLE是Lodop中专门用来输出table表格的语句,它有很多特点,比如该语句不切行(详细可参考查看本博客相关博文:LODOP中ADD_PRINT_TABLE、HTM、HTML表格自动分页测试LODOP设置超文本不自动分页的方法),内容放到thead和tfoot里可以每页输出(相关博文:Lodop打印表格带页头页尾 自动分页每页显示头尾Lodop打印表格带页头页尾 高度是否包含页头页尾),使用一些lodop样式进行计算结果(相关博文:Lodop的TABLE中format格式化的使用)等。
    该语句只能输出一个table,嵌套等复杂table或多个table,可以用其他语句如ADD_PRINT_HTM等输出。

    正常情况下每个单元格设置border之后,每个单元格都有边线,在table里组合起来,看上去就是双线的线条的表格,要想形成人们通常意义的单线表格,需要进行线条合并,也就是border-collapse:collapse这个样式,由上面的链接可以知道,ADD_PRINT_TABLE中有thead和tfoot时,会每页输出,tbody自动分页,每页加上tfoot,这是LODOP的功能,由于单线合并后的差异,可能导致中间线条连不上前面的tbody,导致table中线条连不上,存在间隔,设置cellspacing="0" cellpadding="0",可以让线条连上。
    此外,用ADD_PRINT_HTM不会有这个问题,因为它不会在每页加tfoot
    解决方法是:
    1.给table标签价cellspacing="0" cellpadding="0"
    2.如果ADD_PRINT_HTM可以实现自己的需求,可以用这个。

    代码:

    <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 border=1>
    <thead>
    <tr>
        <td>lodop</td>
        <td>c-lodop</td>
        <td>c-lodop</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>text</td>
        <td>html</td>
        <td>html</td>
    </tr>
    </tfoot>
    <tfoot>
    <tr>
        <td>lodop</td>
        <td>c-lodop</td>
        <td>html</td>
    </tr>
    </tfoot>
    </table>
    </div>
    <hr>
    <div id="div2">
    <table border=1 style="border:solid 1px black;border-collapse:collapse" >
    <thead>
    <tr>
        <td>lodop</td>
        <td>c-lodop</td>
        <td>c-lodop</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>text</td>
        <td>html</td>
        <td>html</td>
    </tr>
    </tBody>
    <tfoot>
    <tr>
        <td>lodop</td>
        <td>c-lodop</td>
        <td>html</td>
    </tr>
    </tfoot>
    </table>
    </div>
    <hr>
    <div id="div3">
    <table border=1 cellspacing="0" cellpadding="0" style="border:solid 1px black;border-collapse:collapse" >
    <thead>
    <tr>
        <td>lodop</td>
        <td>c-lodop</td>
        <td>c-lodop</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>text</td>
        <td>html</td>
        <td>html</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>lodop</td>
        <td>c-lodop</td>
        <td>html</td>
    </tr>
    </tfoot>
    </table>
    </div>
    <a href="javascript:prn1_preview()">打印预览纯文本和超文本样式</a><br>
    <script language="javascript" type="text/javascript">   
            var LODOP; //声明为全局变量 
        function prn1_preview() {
            LODOP=getLodop(); 
            LODOP.PRINT_INIT("");
            LODOP.ADD_PRINT_TABLE(10,10,200,100,document.getElementById("div1").innerHTML);//不合并的双线表格     
            LODOP.ADD_PRINT_TABLE(10,210,200,100,document.getElementById("div2").innerHTML);//单元格线合并后,单线有问题
            LODOP.ADD_PRINT_TABLE(110,10,200,100,document.getElementById("div3").innerHTML);//cellspacing和cellpadding为0
            LODOP.ADD_PRINT_HTM(110,210,200,100,document.getElementById("div3").innerHTML);//用ADD_PRINT_HTM是正常的
            LODOP.PRINT_DESIGN();
            //LODOP.PREVIEW();    
        };
    </script> 
    </body>

    图示:

  • 相关阅读:
    开放式最短路径优先OSPF
    第一课:docker基本知识
    docker 基础
    mycat
    nginx
    keepalived
    mariadb 读写分离
    ansible
    转载 树莓派vnc 教程
    基础命令2
  • 原文地址:https://www.cnblogs.com/huaxie/p/10761058.html
Copyright © 2011-2022 走看看