LODOP中WEB頁面打印設(shè)計table表格寬度固定-超寬隱藏
當(dāng)前位置:點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
之前有博文介紹關(guān)于超出div隱藏內(nèi)容的:LODOP打印超過后隱藏內(nèi)容樣式 前面還有篇是介紹固定table寬高的(如何固定table表格寬度,樣式不受容器影響),需要知道存放內(nèi)容的大致多少來進行設(shè)計表格,如果內(nèi)容比寬高設(shè)置的多,為了顯示完全,寬高還是會有變化,如果想完全固定寬高,超出的直接隱藏掉,可以進行如下設(shè)置: 固定表格寬度,超過寬度隱藏: 前面那篇博文的是table不受容器影響,但是表格寬度還可能受到內(nèi)容的影響,這里通過對表格布局固定超出內(nèi)容影響,實現(xiàn)內(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> 圖示: 該文章在 2023/9/26 10:10:10 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |