【設(shè)置td寬度】
接下來就要設(shè)置td寬度了,要獲取某元素的寬度可以通過以下方法:
- 支持defaultView的可以直接用getComputedStyle獲取width。
- 獲取offsetWidth,再減去border和padding的寬度。
這個本來也可以,但td的border寬度的獲取比較麻煩,下面有更方便的方法。
- 獲取clientWidth,再減去padding的寬度。
這個跟方法2差不多,但更簡單方便。
注意ie的currentStyle不像getComputedStyle能獲取準(zhǔn)確值,而只是一個設(shè)置值,像百分比、auto這些并不會自動轉(zhuǎn)成準(zhǔn)確值,即使是得到準(zhǔn)確值也不一定是實際值,像td即使設(shè)置一個很大的準(zhǔn)確值,實際值也不會超過table本身的寬度。 所以在td這種比較特殊的結(jié)構(gòu)中,除非是很理想的狀況,否則用currentStyle基本沒戲,而且在這個效果中即使是差了1px也會看不舒服。 對于支持defaultView的當(dāng)然可以直接獲取,否則就用上面的方法3來獲。
style.width = (document.defaultView ? parseFloat(css.width) : (o.clientWidth - parseInt(css.paddingLeft) - parseInt(css.paddingRight))) + "px";
但這里不管哪個方法都有一個問題,就是出現(xiàn)scroll的情況,不過還好td這個元素即使設(shè)置了overflow為scroll也不會出現(xiàn)滾動條,除了ie8和chrome。 程序沒對這個情況做處理,畢竟給td設(shè)scroll也不常見,而且支持這個的瀏覽器不多,沒必要花太多時間在這里。 ps:關(guān)于td寬度的自動調(diào)整可以參考w3c的table-layout部分。
如果有影響原td結(jié)構(gòu)的設(shè)置,例如colspan之類的就要留意,錯誤的結(jié)構(gòu)很可能導(dǎo)致一些異常變形。 如果對原表格結(jié)構(gòu)或內(nèi)容做了修改,應(yīng)該執(zhí)行一次Clone方法重構(gòu)新table。 本部分對體驗比較重要,如果設(shè)置不當(dāng)就會有變形的感覺,很不美觀。
【borderCollapse】
上面說到td的border寬度的獲取比較麻煩,那到底有多煩呢? 如果只是一般情況的話,通過borderLeftWidth和borderRightWidth獲取寬度就可以了。 ps:如果borderStyle是"none"的話,那么border就會沒效,所以如果要取border寬度的話最好先判斷一下borderStyle是不是"none"。
但table有一個特別的樣式borderCollapse,設(shè)置table的邊框模型。 它有兩個值,分別是separate(分開,默認(rèn)值)和collapse(合并)。 separate就是我們一般看到的效果,這里主要討論collapse,先看mozilla怎么說的: In the collapsed border model, adjacent table cells share borders. 意思是在collapse border模型中,相鄰的td會共用邊框。看下面的例子會更明白:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body> <style type="text/css"> .t{line-height:40px;width:200px; } .t td{border:5px solid #999;} </style> <table class="t" style="border-collapse:collapse;"> <tr> <td width="50"> </td> <td style="border-left-width:10px; border-left-style:dotted;"> </td> <td width="50"> </td> </tr> </table> <table class="t"> <tr> <td width="50"> </td> <td style="border-left-width:10px; border-left-style:dotted;"> </td> <td width="50"> </td> </tr> </table> </body> </html>
可以看到使用collapse之后,相鄰td的邊框都合并成一條而且是以相鄰邊框中寬度較大的那條為準(zhǔn)。 那td跟table之間呢,參考下面的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body> <style type="text/css"> .t{line-height:40px;width:200px;border-collapse:collapse;} .t td{border:5px solid #999;} </style> <table class="t" id="t1"> <tr> <td width="50" style="border-left:10px dotted #999;"> </td> <td> </td> <td width="50"> </td> </tr> </table> <br /> <table class="t" id="t2" style="border-left:10px dotted #999;"> <tr> <td width="50"> </td> <td> </td> <td width="50"> </td> </tr> </table> </body> </html>
可見table和td之間也是遵從同樣規(guī)則。 還有的是當(dāng)設(shè)置了collapse那cellspacing就無效了。順便說說border-spacing,它其實就是cellspacing在css中的樣式形式,只是ie在ie8才開始支持,詳細(xì)可以看 mozilla的說明。
collapse的一個常見應(yīng)用是做邊框表格,例如1px邊框的表格:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body> <style type="text/css"> .t{line-height:40px;width:200px;}
.t1{border-collapse:collapse;} .t1 td{border:1px solid #999;}
.t2{background-color:#999;} .t2 td{background-color:#FFF;} </style> <table class="t t1"> <tr> <td width="50"> </td> <td> </td> <td width="50"> </td> </tr> </table> <table class="t t2" cellspacing="1"> <tr> <td width="50"> </td> <td> </td> <td width="50"> </td> </tr> </table> </body> </html>
前者用的collapse,后者是用table背景色模擬,雖然效果都一樣,但前者顯然較好,才是真正的“邊框”。
在使用了collapse之后,要寫一個通用的獲取邊框?qū)挾瘸绦驎兊檬致闊,而且有些情況下甚至沒辦法判斷獲取。 詳細(xì)情況這里就不細(xì)說了,有興趣研究的話可以看看w3c的The collapsing border model,當(dāng)然要想全部了解的話還要在各個瀏覽器中研究。
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 JavaScript Table行定位效果 [4] 下一頁 JavaScript Table行定位效果 [6]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|