如何固定table表格宽度，样式不受容器影响

秒速五厘米 2021-11-10 13:34 389阅读 0赞

之前有篇关于LODOP打印超文本表格，两个样式相同的表格，出现错位的情况。  
该博文地址：[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;width:880px;">
            <tr>
                <td style="width:600px;">分析差异点，因浏览器版本不同遵循的html标准不同</td>  
                <td style="width:90px;">分析差异点</td> 
                <td style="width:100px;">排查样式</td>
                <td style="width: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;width:170pt;">
            <tr>
                <td style="width:70pt;">分析差异点，因浏览器版本不同遵循的html标准不同</td>  
                <td style="width:50pt;">分析差异点</td> 
                <td style="width:20pt;">排查样式</td>
                <td style="width:30pt;">在ie下不同版本仿真情况下验证差异</td>
            </tr>
        </table>

图示：

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

![1481828-20190619152400191-1898736242.png][]

转载于:https://www.cnblogs.com/huaxie/p/11051242.html

[LODOP]: https://www.cnblogs.com/huaxie/p/11045426.html
[1481828-20190619152400191-1898736242.png]: /images/20211109/2b5761bab4e64ffda63f7c55a00f3bd0.png