- 相關(guān)推薦
關(guān)于網(wǎng)頁(yè)制作 TD也可以溢出隱藏顯示
或許我這篇文章一取這樣的名字，就會(huì)有人要問了：你怎么還在關(guān)注table啊，那早就過時(shí)了…趕緊Xhtml…div好…ul好…ol好…dl好…完了，不知道還有什么好了。
table真的過時(shí)了么？你真的了解table么？你真的會(huì)用table么？
打口水仗不是我們要做的，留給那些時(shí)間很充裕的人吧。
言歸正傳：
不記得是什么時(shí)候，有人在用table模擬DataGrid的時(shí)候說，為什么td超出設(shè)置為固定寬度的文字不能隱藏，而是會(huì)直接換行呢？
是的，事實(shí)確實(shí)如此，如：
table {width:500px;table-layout:fixed;} .col1 {width:100px;} .col2 {width:200px;} .col3 {width:200px;} td {white-space:nowrap;overflow:hidden;}
| 神舟 優(yōu)雅Q400N | 優(yōu)雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)處理器 | 迅馳4平臺(tái)，突出的性價(jià)比，漂亮的外觀 |
提示：您可以先修改部分代碼再運(yùn)行
運(yùn)行如上代碼，你會(huì)發(fā)現(xiàn)單元格里超過固定寬度的文字不會(huì)被隱藏掉，而是換行顯示了，顯然，這并不是我的本意。
看起來(lái)，這似乎是table的一個(gè)特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的組合，說到底就是white-space:nowrap這個(gè)東東沒起作用，所以看起來(lái)overflow:hidden就失效了。{注：如果是一連串的無(wú)意義字符則可生效，例如：
，這個(gè)時(shí)候就不需要{white-space:nowrap}來(lái)強(qiáng)制它在一行內(nèi)顯示，因?yàn)檫@一連串的a會(huì)被認(rèn)定為是一個(gè)字而不發(fā)生換行，從而超出.col1寬度的a會(huì)被隱藏}
| aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
�。劢鉀Q方案一：］
后來(lái)有人提到使用百分比寬度就可以了，經(jīng)測(cè)試，確實(shí)可以，稍微將第一段的其中幾行樣式修改一下，其它的不變：
.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}
將修改后的代碼運(yùn)行后，會(huì)發(fā)現(xiàn)，超出寬度的文字果然被隱藏了，想要的效果似乎得到了。
事實(shí)上使用百分比寬度確實(shí)可以解決這個(gè)文字隱藏的問題，但這似乎并不是想要的最佳的解決方案，因?yàn)橛械臅r(shí)候我們需要的是一個(gè)固定的寬度，而不是百分比寬度。
而這一切的根源就在于如何使得單元格內(nèi)的文字不換行在一行內(nèi)顯示。
�。劢鉀Q方案二：］
要達(dá)到這個(gè)要求，除了使用樣式，我們也許還會(huì)想到一個(gè)許久不用了的標(biāo)簽，這個(gè)元素的作用就是強(qiáng)制內(nèi)容在一行顯示。以上代碼做如下修改，其它則不變：
做了這個(gè)修改，會(huì)發(fā)現(xiàn)，效果確實(shí)達(dá)到，是不是該興奮呢？不，這似乎還不是最佳的解決方案，因?yàn)楫吘故褂昧艘粋�(gè)許久不用且不推薦使用的元素標(biāo)記，這多少讓人覺得有點(diǎn)不爽。
沿著這個(gè)思路，我換了一個(gè)角度來(lái)考慮這個(gè)問題，發(fā)現(xiàn)問題迎刃而解。
既然在固定寬度的單元格內(nèi)無(wú)法只簡(jiǎn)單的給th,td加上white-space:nowrap，那么我們?cè)诠潭▽挾鹊膯卧駜?nèi)再加一個(gè)標(biāo)記元素呢？
最佳方案：
table {width:500px;table-layout:fixed;} .col1 {width:100px;} .col2 {width:200px;} .col3 {width:200px;} th strong {display:block;width:100%;} tr strong,tr td {white-space:nowrap;overflow:hidden;}
| 產(chǎn)品名稱 | 產(chǎn)品介紹 | 產(chǎn)品備注 |
|---|---|---|
| 神舟 優(yōu)雅Q400N | 優(yōu)雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)處理器 | 迅馳4平臺(tái)，突出的性價(jià)比，漂亮的外觀 |
提示：您可以先修改部分代碼再運(yùn)行
運(yùn)行上面的代碼，會(huì)發(fā)現(xiàn)這樣的做法是可以的，而且從代碼的簡(jiǎn)潔性、可讀性和合理性幾方面來(lái)說，都較前幾種方案為好。
{還沒有做過給單元格隱藏超過固定寬度內(nèi)容的同學(xué)，可先在機(jī)器上玩玩，然后再來(lái)看本文}
其實(shí)table是一個(gè)有趣，可玩性很高東東。我們不應(yīng)該帶著有色眼睛去看它，因?yàn)樗兴嬖诘牡览怼?/p>
之后會(huì)繼續(xù)寫一些關(guān)于table的文章，也作自?shī)手谩?/p>
【網(wǎng)頁(yè)制作 TD也可以溢出隱藏顯示】相關(guān)文章：
顯示電腦隱藏文件的操作步驟07-04
網(wǎng)頁(yè)制作的心得12-08
《網(wǎng)頁(yè)的制作》教案01-16
網(wǎng)頁(yè)制作員工作04-26
網(wǎng)頁(yè)制作的實(shí)習(xí)報(bào)告07-01
網(wǎng)頁(yè)制作教學(xué)設(shè)計(jì)02-25