生活随笔
收集整理的這篇文章主要介紹了
LODOP打印table表格宽度固定-超宽隐藏
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
之前有博文介紹關(guān)于超出div隱藏內(nèi)容的：LODOP打印超過后隱藏內(nèi)容樣式?
里面提到了overflow:hidden;控制超出后隱藏，但是前面那篇用的是div，如果是在table中，由于table默認(rèn)的table-layout是auto自動(dòng)，雖然設(shè)置了超出隱藏，也設(shè)置了具體的td單元格寬度，設(shè)置了table的具體寬度，但是因?yàn)檫@個(gè)able-layout是auto還在，內(nèi)容超過設(shè)置的寬度，表格寬度也會(huì)發(fā)生變化，設(shè)置的具體的td的寬度也沒有完全按照設(shè)置的寬度進(jìn)行布局。
前面還有篇是介紹固定table寬高的（如何固定table表格寬度，樣式不受容器影響），需要知道存放內(nèi)容的大致多少來進(jìn)行設(shè)計(jì)表格，如果內(nèi)容比寬高設(shè)置的多，為了顯示完全，寬高還是會(huì)有變化，如果想完全固定寬高，超出的直接隱藏掉，可以進(jìn)行如下設(shè)置：
固定表格寬度，超過寬度隱藏：
table：table-layout:fixed;
td：overflow:hidden;
前面那篇博文的是table不受容器影響，但是表格寬度還可能受到內(nèi)容的影響，這里通過對表格布局固定超出內(nèi)容影響，實(shí)現(xiàn)內(nèi)容不會(huì)影響表格寬度。
測試代碼：
代碼中的測試:
有效：寬有效（內(nèi)容是空格）
有效：寬有效（內(nèi)容不超出設(shè)定寬度）
無效：寬度不是設(shè)置的寬度（內(nèi)容超出設(shè)定寬度）
無效：td設(shè)置了超出隱藏，寬度不是設(shè)置的寬度（內(nèi)容超出設(shè)定寬度）
有效：table設(shè)置了table-layout:fixed，寬度固定（但是內(nèi)容超出了表格）
有效：table設(shè)置了table-layout:fixed且td設(shè)置了超出隱藏，內(nèi)容在表格里且寬度有效
<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;"> </td><td style="width:100px;"> </td>
</tr>
</table>
<br>
<table border=1 style="width:140px;border-collapse:collapse" ><!--寬高有效（內(nèi)容不超出）-->
<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" ><!--內(nèi)容超出寬度，單元格寬高無效-->
<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;" ><!--內(nèi)容超出寬度，單元格設(shè)置了溢出隱藏，無效-->
<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;" ><!--內(nèi)容超出，表格設(shè)置了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;" ><!--內(nèi)容超出，格設(shè)置了table-layout:fixed且設(shè)置了超出隱藏-->
<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> 圖示：
轉(zhuǎn)載于:https://www.cnblogs.com/huaxie/p/11157189.html
總結(jié)
以上是生活随笔為你收集整理的LODOP打印table表格宽度固定-超宽隐藏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
