當(dāng)前位置:軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > 全自動(dòng)單元格

全自動(dòng)單元格

2012/10/29 16:04:31作者:佚名來(lái)源:網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

全自動(dòng)單元格

【實(shí)例描述】

所謂全自動(dòng)單元格,是指不管單元格的內(nèi)容有多少,當(dāng)其內(nèi)容寬度超過(guò)單元格寬度時(shí),會(huì)自動(dòng)換行;當(dāng)其內(nèi)容高度超過(guò)單元格高度時(shí),會(huì)自動(dòng)出現(xiàn)垂直滾動(dòng)條。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>標(biāo)題頁(yè)-學(xué)無(wú)憂(www.yzddtk.cn)</title> </head> <body> <table width="80%" align="center" border="1" cellpadding="0" cellspacing="0">   <tr>     <td width="50%">       <div style="height:100px;overflow:auto;">          這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度 和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬 度內(nèi)容內(nèi)容內(nèi)容這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試 高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度 和寬度這是測(cè)試高度和寬度內(nèi)容這是測(cè)試高度和寬度這是測(cè)試高度 和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬 度這是測(cè)試高度和寬度這是測(cè)試高度和寬度內(nèi)容內(nèi)容這是測(cè)試高度 和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬 度這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬度內(nèi)容

這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是 測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試 高度和寬度內(nèi)容內(nèi)容這是測(cè)試高度和寬度這是測(cè)試高度和寬度內(nèi)容!       </div>     <td>     <td width="50%">       <div style="height:100px;overflow:auto;">          這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高 度和寬度這是測(cè)試高度和寬度這是測(cè)試高度和寬度這是測(cè)試高度和 寬度內(nèi)容內(nèi)容內(nèi)容這是測(cè)試高度和寬度這是測(cè)試高度和寬度內(nèi)!       </div>     <td>   </tr> </table> </body> </html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例使用了CSS來(lái)控制單元格的高度和寬度:本例中將單元格的高度固定為100px,然后使用了“overflow”來(lái)設(shè)置垂直滾動(dòng)條,其值為“auto”,表示一旦內(nèi)容超過(guò)單元格的高度,則自動(dòng)出現(xiàn)滾動(dòng)條。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性,你可以點(diǎn)擊:全自動(dòng)單元格 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽: 全自動(dòng)  單元格