之前有博文介绍关于超出div隐藏内容的：LODOP打印超过后隐藏内容样式
里面提到了overflow:hidden;控制超出后隐藏，但是前面那篇用的是div，如果是在table中，由于table默认的table-layout是auto自动，虽然设置了超出隐藏，也设置了具体的td单元格宽度，设置了table的具体宽度，但是因为这个able-layout是auto还在，内容超过设置的宽度，表格宽度也会发生变化，设置的具体的td的宽度也没有完全按照设置的宽度进行布局。

前面还有篇是介绍固定table宽高的（如何固定table表格宽度，样式不受容器影响），需要知道存放内容的大致多少来进行设计表格，如果内容比宽高设置的多，为了显示完全，宽高还是会有变化，如果想完全固定宽高，超出的直接隐藏掉，可以进行如下设置：

固定表格宽度，超过宽度隐藏：
table：table-layout:fixed;
td：overflow:hidden;

前面那篇博文的是table不受容器影响，但是表格宽度还可能受到内容的影响，这里通过对表格布局固定超出内容影响，实现内容不会影响表格宽度。

测试代码：

代码中的测试:
有效：宽有效（内容是空格）
有效：宽有效（内容不超出设定宽度）
无效：宽度不是设置的宽度（内容超出设定宽度）
无效：td设置了超出隐藏，宽度不是设置的宽度（内容超出设定宽度）
有效：table设置了table-layout:fixed，宽度固定（但是内容超出了表格）
有效：table设置了table-layout:fixed且td设置了超出隐藏，内容在表格里且宽度有效

<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="d1"><!--table和td都加固定宽度-->

<table border=1 style="width:140px;border-collapse:collapse" ><!--宽高有效-->

<tr>

    <td style="width:40px;">&nbsp;</td>

    <td style="width:100px;">&nbsp;</td>

</tr>

</table>

<br>

<table border=1 style="width:140px;border-collapse:collapse" ><!--宽高有效（内容不超出）-->

<tr>

    <td style="width:40px;">1</td>

    <td style="width:100px;">333</td>

</tr>

</table>

<br>

<table border=1 style="width:140px;border-collapse:collapse" ><!--内容超出宽度，单元格宽高无效-->

<tr>

    <td style="width:40px;">1</td>

    <td style="width:100px;">333333333333333333333333333333333333333333333333</td>

</tr>

</table>

<br>

<table border=1 style="width:140px;border-collapse:collapse;" ><!--内容超出宽度，单元格设置了溢出隐藏，无效-->

<tr>

    <td style="width:40px;">1</td>

    <td style="width:100px;overflow:hidden;">333333333333333333333333333333333333333333333333</td>

</tr>

</table>

<br>

<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--内容超出，表格设置了table-layout:fixed-->

<tr>

    <td style="width:40px;">1</td>

    <td style="width:100px;">333333333333333333333333333333333333333333333333</td>

</tr>

</table><br>

<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--内容超出，格设置了table-layout:fixed且设置了超出隐藏-->

<tr>

    <td style="width:40px;">1</td>

    <td style="width:100px;overflow:hidden;">333333333333333333333333333333333333333333333333</td>

</tr>

</table>

<br>

</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_HTM(0,0,"100%","100%",document.getElementById("d1").innerHTML);

        //LODOP.PRINT_DESIGN();

        LODOP.PREVIEW();

    };

</script>

</body>

图示：

LODOP打印table表格宽度固定-超宽隐藏的更多相关文章

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

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

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

    之前有篇关于LODOP打印超文本表格,两个样式相同的表格,出现错位的情况.该博文地址:LODOP打印表格错位的几种情况该文试验了两种现象,第一种浏览器页面显示错位,打印预览也错位,第二种浏览器页面表格 ...

  3. LODOP打印table超宽用省略号带'-'的内容换行问题

    前面的博文有div超宽隐藏(LODOP打印超过后隐藏内容样式),还有有table设置超宽隐藏(),此外,还有超宽后用省略号表示的css样式,此文是针对这个样式的.该样式正常情况下没问题,但是遇到-短线 ...

  4. LODOP打印table不切行TableRowThickNess

    不切行的调整方法有三种:1.简单表格,不嵌套合并等,可以用ADD_PRINT_TABLE输出,该 语句不切行,相关博文:LODOP设置超文本不自动分页的方法.2.进入打印设计,调整打印项到合适的高度, ...

  5. html中table表格标题固定表数据行出现滚动条

    需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...

  6. jquery.jqprint-0.3.js打印table表格遇到的坑

    在谷歌控制台输入window.print();可以调起当前整个页面的打印预览,那么要想打印页面某块区域内容怎么办呢? 我找到了jqprint插件,其原理是运用iframe 元素创建另外一个文档的内联框 ...

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

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

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

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

  9. LODOP打印表格错位的几种情况

    在网页设计中,表格经常用到百分比,表格在浏览器中展示,这个百分比是相对于浏览器的.还有div,各种浮动之类的相对位置,也有的用到百分比.而在LODOP打印中,百分比是相对于纸张的.LODOP中打印项的 ...

随机推荐

  1. HDP 大数据平台搭建

    一.概述 Apache Ambari是一个基于Web的支持Apache Hadoop集群的供应.管理和监控的开源工具,Ambari已支持大多数Hadoop组件,包括HDFS.MapReduce.Hiv ...

  2. loj #6342. 跳一跳 期望dp

    令 $f[i]$ 表示已经到达 $i$ 点,为了到大 $n$ 点还期望需要的时间,随便转移一下就行. 由于本题卡空间,要记得开滚动数组. #include <bits/stdc++.h> ...

  3. Linux下搭建iSCSI共享存储的方法 Linux-IO Target 方式 Debian9.5下实现

    iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够在诸如高速 ...

  4. 洛谷P3178[HAOI]2015 树上操作

    题目 树剖裸题,这个题更可以深刻的理解树剖中把树上的节点转换为区间的思想. 要注意在区间上连续的节点,一定是在一棵子树中. #include <bits/stdc++.h> #define ...

  5. php 运算符的优先级

    由上到下,依次递减,同行优先级相同. 结合方向 运算符 附加信息 无 clone new clone 和 new 左 [ array() 右 ** 算术运算符 右 ++ -- ~ (int) (flo ...

  6. ZR#989

    ZR#989 先吐槽一下这个ZZ出题人,卡哈希表. 我就不写那个能过的类高精了,直接写哈希的题解 解法: 判断两个数相加结果是否等于第三个数, 可以直接用 hash判断． #include<io ...

  7. Linux下的find命令详解

    0x01 简介 find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查找到的子 ...

  8. kafka集群搭建(图文并用)

    将安装包上传服务器并解压 scp kafka_2.11-1.0.0.tgz username@{ip}:~/. mkdir /usr/local/kafka mv kafka_2.11-1.0.0.t ...

  9. ubuntu之路——day10.6 如何理解人类表现和超过人类表现

    从某种角度来说,已知的人类最佳表现其实可以被当做贝叶斯最优错误,对于医学图像分类可以参见下图中的例子. 那么如何理解超过人类表现,在哪些领域机器已经做到了超越人类呢?

  10. NoSql数据库Redis系列（3）——Redis数据持久化（RDB）

    大家都知道 Redis 是一个内存数据库,所谓内存数据库,就是将数据库中的内容保存在内存中,这与传统的MySQL,Oracle等关系型数据库直接将内容保存到硬盘中相比,内存数据库的读写效率比传统数据库 ...