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>

圖示:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM