之前有篇关于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加具体宽度,单元格加具体宽度,宽度样式不受容器的影响,注意宽度超过纸张会不显示。
根据自己需要的纸张设计表格,如图,修改表格宽度到纸张能容纳的大小。

如何固定table表格宽度,样式不受容器影响的更多相关文章

  1. LODOP打印table表格宽度固定-超宽隐藏

    之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...

  2. table表格宽度固定,同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  3. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  4. Element-UI中关于table表格的样式操作

    项目中使用到element-ui组件库,经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比 ...

  5. table表格边框样式

    ; border-left:1px solid #aaa; border-top:1px solid #aaa; } td{border-right:1px solid #aaa; border-bo ...

  6. css Table 表格宽度失效解决方案

    使用div包裹内容进行支撑 <table cellspacing="0"> <caption>89 HOLLAND ROAD SINGAPORE 27575 ...

  7. html - table 表格不被撑开,td某些列宽度固定某些列自适应

    table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: t ...

  8. table表格某一td内容太多导致样式混乱的解决方案

    对于有很多条目的数据,通常采用table元素来快速实现,某一个td的内容太多的话就会导致样式混乱难看. 解决方案 要让table的宽度固定可以给table元素设置table-layout:fixed; ...

  9. table固定列的宽度,超出部分用…代替(针对普通table和antd)

    一. 实现思路 我们都知道让溢出内容变成...,只需要以下: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 表格里的内容 ...

随机推荐

  1. Sublime 原版安装

    sublime text3 安装方法 ① 官网下载安装 https://www.sublimetext.com/3 ② 更改hosts文件 具体方法如下: windows系统的hosts文件在C:\W ...

  2. UVA 11019 Matrix Matcher ( 二维字符串匹配, AC自动机 || 二维Hash )

    题目: 传送门 题意: 给你一个 n * m 的文本串 T, 再给你一个 r * c 的模式串 S: 问模式串 S 在文本串 T 中出现了多少次. 解: 法一: AC自动机 (正解) 670ms 把模 ...

  3. IIS相关的常见报错

    1.错误消息 401.3: 无权限 您无权使用您提供的凭据查看此目录或页(由于访问控制列表而导致访问被拒绝).请让 Web 服务器的管理员授予您访问“E:\IIS_Deploy\WebServices ...

  4. Vim初学

    实现G++编译 1,首先下载安装MinGW,下载地址在http://sourceforge.net/projects/mingw/.这个是边下载边安装的,下载完成即安装完成.我的安装目录是G:\Min ...

  5. 13、SparkContext详解

    一.SparkContext原理 1.图解 二.SparkContext源码 1.TaskScheduler创建 ###SparkContext.scala // Create and start t ...

  6. HDU-盐水的故事

    http://acm.hdu.edu.cn/showproblem.php?pid=1408 这是一道高精度问题: 在自己错了数十遍之后找到了不少规律: 首先是Output limit exceede ...

  7. esp8266 + dht11 + 两路继电器 实现pc远程控制开关机温度监控.并配置zabbix监控

    事因:翻了翻自己之前的硬件小箱子,几年前买的一些小东西,想用用起来. 正好我有些数据放在机器上,有时候需要机器启动,我使用完成后在断开. 其实网络唤醒也能做到,但是机器一直给电也不好,在说家里有小孩A ...

  8. Dockers安装nginx

    方法一.通过 Dockerfile构建 创建Dockerfile 首先,创建目录nginx,用于存放后面的相关东西. runoob@runoob:~$ mkdir -p ~/nginx/www ~/n ...

  9. DH密钥加解密

    一.概述 1.与对称加密算法的主要差别在于,加密和解密的密钥不相同,一个公开(公钥),一个保密(私钥).主要解决了对称加密算法密钥分配管理的问题,提高了算法安全性. 2.非对称加密算法的加密.解密的效 ...

  10. 生产者消费者模型Java实现

    生产者消费者模型 生产者消费者模型可以描述为: ①生产者持续生产,直到仓库放满产品,则停止生产进入等待状态:仓库不满后继续生产: ②消费者持续消费,直到仓库空,则停止消费进入等待状态:仓库不空后,继续 ...