之前有博文介绍关于超出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. django 第四天模板渲染

    今日内容 一.模板渲染 语法 {{ 变量 }} {% 逻辑 %} 1.变量 取列表中的第几个元素,用索引 <p>{{ namelist.2 }}</p> 取字典中的第几个元素用 ...

  2. sqoop job 实现自动增量导入

    一.测试环境 1.MySQL表结构 mysql> show create table autoextend\GCREATE TABLE `autoextend` (  `id` bigint(2 ...

  3. webuploader+php如何实现分片+断点续传

    这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...

  4. SpringCloud分布式系统的演进.

    day1 https://github.com/deadzq/product-service 单体服务 https://github.com/deadzq/eurekaserver1 注册中心Eure ...

  5. lixuxmint系统定制与配置（2）-输入法

    小书匠Linux RIME的官网在这里 1.安装 刚开始是使用ibus-rime,后来使用过程感觉不舒服,就换回fcitx-rime.使用以下命令安装fcitx-rime sudo apt insta ...

  6. UOJ#121. 【NOI2013】向量内积 随机化算法,矩阵

    原文链接www.cnblogs.com/zhouzhendong/UOJ121.html 前言 完蛋了我越来越菜了贺题都不会了. 题解 $O(n ^ 2 d) $ 暴力送 60 分. Bitset 优 ...

  7. rapidxml学习

    参考: 官网http://rapidxml.sourceforge.net/ https://blog.csdn.net/wqvbjhc/article/details/7662931 http:// ...

  8. 大数据|linux权限chmod和chown

    一.基础概念 1)rwx含义 示例如下 r:读权限read 4 w:写权限write 2 x:操作权限execute  1 -:无权限 2)drwxr - xr -x 与 - rw - r - - r ...

  9. redis渐进式 rehash

    转载(http://redisbook.com/preview/dict/incremental_rehashing.html) 上一节说过, 扩展或收缩哈希表需要将 ht[0] 里面的所有键值对 r ...

  10. Vue基础学习 --- 遍历数组

    <body> <div id="app"> <ul> <!-- 遍历数组 --> <li v-for="user i ...