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

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

图示：

转载于:https://www.cnblogs.com/huaxie/p/11157189.html

LODOP打印table表格宽度固定-超宽隐藏相关推荐

解决 elementUI 在IE下 table 表格宽度不是100%的问题
解决 elementUI 在IE下 table 表格宽度不是100%的问题参考文章: (1)解决 elementUI 在IE下 table 表格宽度不是100%的问题 (2)https://www. ...
table单元格宽度一致_css控制table表格宽度的小技巧教程
因为我们平常说网页布局用DIV CSS代替table布局,但是并不是要完全放弃table,在有些数据呈现的时候用table还是比较方便的,现在我们来讲讲用css控制table宽度的方法. 对table ...
使用lodop打印el-table表格无法显示内容，只显示表头的问题
今天使用lodop打印el-table表格,发现只显示表头,而且显示的还不规范,于是一直在测试,最后想到把要打印元素转化为图片就不会造成无法正确显示内容了 1,引入插件 npm install htm ...
table表格过长数据隐藏，鼠标停留显示全部
1.css代码,放在<style>标签里 table {table-layout: fixed; /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */}table ...
class jqprint 失效_jquery.jqprint-0.3.js打印table表格遇到的坑
在谷歌控制台输入window.print();可以调起当前整个页面的打印预览,那么要想打印页面某块区域内容怎么办呢? 我找到了jqprint插件,其原理是运用iframe 元素创建另外一个文档的内联框 ...
JS 打印——table表格
//js部分-- 打印数据 function PrintingData() { var row = $('#EquBasisGrid').datagrid("getSelected& ...
element table滚动条占宽度_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
Vue.js ：使用LODOP打印表格文件
用到的打印工具是LODOP. 项目环境是vue-cli搭建的,组件库是ant design vue. 1.在需要打印的页面引入插件. <script>import { getLodop } ...
HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...

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

LODOP打印table表格宽度固定-超宽隐藏相关推荐

最新文章

热门文章