zoukankan      html  css  js  c++  java
  • 如何固定table表格宽度,样式不受容器影响

    之前有篇关于LODOP打印超文本表格,两个样式相同的表格,出现错位的情况。
    该博文地址:LODOP打印表格错位的几种情况
    该文试验了两种现象,第一种浏览器页面显示错位,打印预览也错位,第二种浏览器页面表格不错位,打印预览却错位。
    这两个其实都是和容纳table表格的容器有关,也就是样式有问题的导致的,仔细对比排查样式,可排查出问题。

    想让样式不变形,完全按照代码的宽度,可:在table标签里添加宽度,单元格里加宽度。这种是不受容器影响的。如下面图示,按照纸张进行设计表格,而不是浏览器

    上面那个博文链接中,
    1.table表格设置了宽度为100%,单元格不设置宽度,导致内容不同每个单元格宽度不同。
    2.table表格设置了宽度为100%,每个单元格设置了具体的宽度,然后实际中,表格整体的宽度还是按照的百分之百,设置的具体宽度并不是固定的,只是按照一定比例进行了放大,布满了浏览器的宽度。
    这两种都导致了单元格错位。

    如果table表格不设置宽度为100%,table表格不设置宽度,单元格设置具体的宽度,测试发现,浏览器中确实能正常显示单元格宽度,增大浏览器等没有问题,但是减小的时候,浏览器还是会自动对宽度进行缩小,也就是浏览器中的表格是这样的:table不设置宽度,浏览器宽度拖动减小,会自适应一样的表格宽度本身也会改变,即使每个单元格设置了具体的宽度数值,浏览器还是自适用。

    如果想要去掉样式和容器的影响,就是把table标签本身设置上具体宽度,这样之后,即使浏览器怎么拖动,样式已经固定了,就不会受浏览器样式影响了。

    不受容器影响,也就不会发生内容不同导致的错位现象。
    表格代码:

        <table border=1 cellSpacing=0 cellPadding=0 style="border-collapse:collapse;880px;">
            <tr>
                <td style="600px;">分析差异点,因浏览器版本不同遵循的html标准不同</td>  
                <td style="90px;">分析差异点</td> 
                <td style="100px;">排查样式</td>
                <td style="90px;">在ie下不同版本仿真情况下验证差异</td>
            </tr>
        </table>

    打印代码:(纸张设置的较小,表格本身的宽度已经超过了纸张)

        function prn1_preview() {
            LODOP=getLodop(); 
            LODOP.PRINT_INIT("");
            LODOP.SET_PRINT_PAGESIZE(1,600,1600,"");
            LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("div1").innerHTML);
            LODOP.PRINT_DESIGN();
    //        LODOP.PREVIEW();    
        };

    图示见后面,和后面的合成了一张图:

    修改为固定宽度后,表格不会随着容器自适用了,如果想保留自适用,可以合成到一个表格里,或者根据纸张重新设计表格。
    解决两个表格自适应导致错位的方法:
    1.合成一个table表格,同一个表格里不会发生单元格错位。(保留自适用)
    2.两个表格进行重组,设置具体的表格宽度和单元格宽度,根据纸张进行设计。(不受容器影响,保持样式不变形,不再自适应,适应设计的表格。)

    代码:(根据纸张设计表格),如该纸张宽度是600, LODOP.SET_PRINT_PAGESIZE中的纸张参数,默认单位是0.1mm,也就是纸张是60mm。
    表格设计的宽度迎合纸张,可以转换成pt试试,60*(72/25.4)约等于170pt。然后随便分配了下每个单元格占的数值,该表格就能固定宽度显示且能不会超过纸张。
    表格代码:

        <table border=1 cellSpacing=0 cellPadding=0 style="border-collapse:collapse;170pt;">
            <tr>
                <td style="70pt;">分析差异点,因浏览器版本不同遵循的html标准不同</td>  
                <td style="50pt;">分析差异点</td> 
                <td style="20pt;">排查样式</td>
                <td style="30pt;">在ie下不同版本仿真情况下验证差异</td>
            </tr>
        </table>

    图示:

    table加具体宽度,单元格加具体宽度宽度样式不受容器的影响,注意宽度超过纸张会不显示。
    根据自己需要的纸张设计表格,如图,修改表格宽度到纸张能容纳的大小。

  • 相关阅读:
    javascript数据结构
    uni-app — 一套前端开发跨平台应用的终极解决方案
    从函数式编程到Ramda函数库(二)
    从函数式编程到Ramda函数库(一)
    node.js爬取数据并定时发送HTML邮件
    vue cli3.0 结合echarts3.0和地图的使用方法
    vue加载优化策略
    C#时间格式化
    wpf 调用线程无法访问此对象,因为另一个线程拥有该对象。
    使用oracle数据库开发,异常总结
  • 原文地址:https://www.cnblogs.com/huaxie/p/11051242.html
Copyright © 2011-2022 走看看