,,

<s id="u0gq0"></s>

LODOP中WEB頁(yè)面打印設(shè)計(jì)table表格寬度固定-超寬隱藏

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2023年9月26日 10:10 本文熱度 1193

之前有博文介紹關(guān)于超出div隱藏內(nèi)容的：LODOP打印超過(guò)后隱藏內(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)容超過(guò)設(shè)置的寬度，表格寬度也會(huì)發(fā)生變化，設(shè)置的具體的td的寬度也沒(méi)有完全按照設(shè)置的寬度進(jìn)行布局。

前面還有篇是介紹固定table寬高的（如何固定table表格寬度，樣式不受容器影響），需要知道存放內(nèi)容的大致多少來(lái)進(jìn)行設(shè)計(jì)表格，如果內(nèi)容比寬高設(shè)置的多，為了顯示完全，寬高還是會(huì)有變化，如果想完全固定寬高，超出的直接隱藏掉，可以進(jìn)行如下設(shè)置：

固定表格寬度，超過(guò)寬度隱藏：
table：table-layout:fixed;
td：overflow:hidden;

前面那篇博文的是table不受容器影響，但是表格寬度還可能受到內(nèi)容的影響，這里通過(guò)對(duì)表格布局固定超出內(nèi)容影響，實(shí)現(xiàn)內(nèi)容不會(huì)影響表格寬度。

測(cè)試代碼：

代碼中的測(cè)試:
有效：寬有效（內(nèi)容是空格）
有效：寬有效（內(nèi)容不超出設(shè)定寬度）
無(wú)效：寬度不是設(shè)置的寬度（內(nèi)容超出設(shè)定寬度）
無(wú)效：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;">&nbsp;</td>
    <td style="width:100px;">&nbsp;</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)容超出寬度，單元格寬高無(wú)效-->
<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è)置了溢出隱藏，無(wú)效-->
<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ò)

關(guān)鍵字查詢(xún)

相關(guān)文章

正在查詢(xún)...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專(zhuān)業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車(chē)隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類(lèi)企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷(xiāo)售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶(hù)的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

<rt id="qcqiu"></rt>

公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

LODOP中WEB頁(yè)面打印設(shè)計(jì)table表格寬度固定-超寬隱藏