之前有博文介绍关于超出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. zabbix基本介绍

    来源是 觅安教育 大家有兴趣可以去哔哩哔哩搜搜. Open-falcon是由小米公司开源 比如windows,linux,unix,openBSD,AIX,solaris,Mac等操作系统,都可以安装 ...

  2. Centos 7 安装 dotnet 环境

    Centos 7 安装  dotnet 环境 下载官方 rpm yum 源 直接 yum install 安装rpm -Uvh https://packages.microsoft.com/confi ...

  3. P3388 【模板】割点（割顶）&& 桥

    题目背景 割点 题目描述 给出一个n个点,m条边的无向图,求图的割点. 输入输出格式 输入格式: 第一行输入n,m 下面m行每行输入x,y表示x到y有一条边 输出格式: 第一行输出割点个数 第二行按照 ...

  4. 洛谷P1040 加分二叉树题解

    dp即可 \(f[i][j]\)表示i到j的加分 相当于区间dp了 #include<cstdio> using namespace std; int v[50]; int f[55][5 ...

  5. 15.linux iptables防火墙规则vsftp服务

    一.服务所开启的端口号.          dhcp 67       samba 139 445       http 80  https 443       mysql 3306         ...

  6. No module named 'lsb_release'

    python3.7安装后提示 No module named 'lsb_release' 修改"/usr/bin/lsb_release" #!/usr/bin/python3.5 ...

  7. 批量管理工具：pssh/ansible

    ssh 免密码 批量管理1.创建用户useradd user1echo “123456”| passwd --stdin user12.创建秘钥ssh-keygen -t dsa然后一直回车 非交互式 ...

  8. post请求头中常见content-type（非常重要）

    定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码.默认地,表单数据会编码为 "application/x-www-form-urlencoded". ...

  9. Windows安装Redis并添加本地自启动服务并解决客户端dll报错

    参考文章:https://blog.csdn.net/realjh/article/details/82026160 Redis下载: https://github.com/MicrosoftArch ...

  10. 新概念英语第二册Lesson5：No wrong numbers

    Lesson 5 No wrong numbers 无错号之虞 First listen and then answer the question. 听录音,然后回答以下问题. What does ' ...