之前有博文介绍关于超出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. Deepgreen/Greenplum 删除节点步骤

    Deepgreen/Greenplum删除节点步骤 Greenplum和Deepgreen官方都没有给出删除节点的方法和建议,但实际上,我们可以对节点进行删除.由于不确定性,删除节点极有可能导致其他的 ...

  2. Django+element ui前后端不分离的博客程序

    最近把去年写的一个烂尾博客(使用了django1.11和element ui)又重新完善了一下,修改了样式和增加了新功能 github链接:https://github.com/ngauerh/Nag ...

  3. fread和fwrite和feof读写二进制文件

    #include <stdio.h> #include <stdlib.h> void text_to_bin(char *argv[]); void bin_to_text( ...

  4. 洛谷 P1190 接水问题 题解

    P1190 接水问题 题目描述 学校里有一个水房,水房里一共装有 \(m\) 个龙头可供同学们打开水,每个龙头每秒钟的供水量相等,均为1. 现在有 \(n\) 名同学准备接水,他们的初始接水顺序已经确 ...

  5. LibreOJ #524. 「LibreOJ β Round #4」游戏

    二次联通门 : LibreOJ #524. 「LibreOJ β Round #4」游戏 /* LibreOJ #524. 「LibreOJ β Round #4」游戏 找找规律就会发现.. 当有X的 ...

  6. 笔记-读官方Git教程(1)~认识Git

    小书匠版本管理 教程内容基本来自git官方教程,认真都了系列的文章,然后对一些重点的记录下来,做了简单的归纳并写上自己的思考. 目录: 1.Git介绍 2.Git版本控制原理 3.Git特点 4.Gi ...

  7. Out of memory: Kill process 6033 (mysqld) score 85 or sacrifice child

    进入正题前先说明:OOM killer什么时候出现? linux下允许程序申请比系统可用内存更多的内存,这个特性叫Overcommit.这样做是出于优化系统考虑,因为不是所有的程序申请了内存就立刻使用 ...

  8. [php]Windows环境下Composer的安装教程

    方法一: 下载Composer-Setup.exe后安装,它会自动搜索 php.exe 路径, 如果找不到,则手动添加路径.   Windows安装Composer 方法二: 如果出现如下错误,说明伟 ...

  9. [loj 2478][luogu P4843]「九省联考 2018」林克卡特树

    传送门 Description 小L 最近沉迷于塞尔达传说:荒野之息(The Legend of Zelda: Breath of The Wild)无法自拔,他尤其喜欢游戏中的迷你挑战. 游戏中有一 ...

  10. hive（2）数据类型和文件格式

    基本的数据类型 Hive支持关系型数据中大多数基本的数据类型,同时也支持关系型数据库中很少出现的三种集合数据类型. 集合数据类型 Hive中的列支持使用struct.map.array集合数据类型,下 ...