關(guān)于網(wǎng)頁制作 TD也可以溢出隱藏顯示

　　或許我這篇文章一取這樣的名字，就會有人要問了：你怎么還在關(guān)注table啊，那早就過時了…趕緊Xhtml…div好…ul好…ol好…dl好…完了，不知道還有什么好了。

　　table真的過時了么？你真的了解table么？你真的會用table么？

　　打口水仗不是我們要做的，留給那些時間很充裕的人吧。

　　言歸正傳：

　　不記得是什么時候，有人在用table模擬DataGrid的時候說，為什么td超出設(shè)置為固定寬度的文字不能隱藏，而是會直接換行呢？

　　是的，事實確實如此，如：

　　table {width:500px;table-layout:fixed;} .col1 {width:100px;} .col2 {width:200px;} .col3 {width:200px;} td {white-space:nowrap;overflow:hidden;}

　　提示：您可以先修改部分代碼再運行

　　運行如上代碼，你會發(fā)現(xiàn)單元格里超過固定寬度的文字不會被隱藏掉，而是換行顯示了，顯然，這并不是我的本意。

　　看起來，這似乎是table的一個特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的組合，說到底就是white-space:nowrap這個東東沒起作用，所以看起來overflow:hidden就失效了。{注：如果是一連串的無意義字符則可生效，例如：

　　，這個時候就不需要{white-space:nowrap}來強制它在一行內(nèi)顯示，因為這一連串的a會被認定為是一個字而不發(fā)生換行，從而超出.col1寬度的a會被隱藏}

　　［解決方案一：］

　　后來有人提到使用百分比寬度就可以了，經(jīng)測試，確實可以，稍微將第一段的其中幾行樣式修改一下，其它的不變：

　　.col1 {width:20%;}

　　.col2 {width:40%;}

　　.col3 {width:40%;}

　　將修改后的代碼運行后，會發(fā)現(xiàn)，超出寬度的文字果然被隱藏了，想要的效果似乎得到了。

　　事實上使用百分比寬度確實可以解決這個文字隱藏的問題，但這似乎并不是想要的最佳的解決方案，因為有的時候我們需要的是一個固定的寬度，而不是百分比寬度。

　　而這一切的根源就在于如何使得單元格內(nèi)的文字不換行在一行內(nèi)顯示。

　�。劢鉀Q方案二：］

　　要達到這個要求，除了使用樣式，我們也許還會想到一個許久不用了的標簽，這個元素的作用就是強制內(nèi)容在一行顯示。以上代碼做如下修改，其它則不變：

　　做了這個修改，會發(fā)現(xiàn)，效果確實達到，是不是該興奮呢？不，這似乎還不是最佳的解決方案，因為畢竟使用了一個許久不用且不推薦使用的元素標記，這多少讓人覺得有點不爽。

　　沿著這個思路，我換了一個角度來考慮這個問題，發(fā)現(xiàn)問題迎刃而解。

　　既然在固定寬度的單元格內(nèi)無法只簡單的給th,td加上white-space:nowrap，那么我們在固定寬度的單元格內(nèi)再加一個標記元素呢？

　　最佳方案：

　　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;}

　　提示：您可以先修改部分代碼再運行

　　運行上面的代碼，會發(fā)現(xiàn)這樣的做法是可以的，而且從代碼的簡潔性、可讀性和合理性幾方面來說，都較前幾種方案為好。

　　{還沒有做過給單元格隱藏超過固定寬度內(nèi)容的同學，可先在機器上玩玩，然后再來看本文}

　　其實table是一個有趣，可玩性很高東東。我們不應(yīng)該帶著有色眼睛去看它，因為它有它存在的道理。

　　之后會繼續(xù)寫一些關(guān)于table的文章，也作自娛之用。

【網(wǎng)頁制作 TD也可以溢出隱藏顯示】相關(guān)文章：

設(shè)計菜單橫向隱藏與顯示的效果07-02

顯示電腦隱藏文件的操作步驟07-04

網(wǎng)頁制作的心得12-08

《網(wǎng)頁的制作》教案01-16

網(wǎng)頁制作員工作04-26

實用的網(wǎng)頁制作心得07-04

網(wǎng)頁制作的實習報告07-01

網(wǎng)頁制作教學設(shè)計02-25

網(wǎng)頁制作實習報告11-14

網(wǎng)頁設(shè)計與制作心得12-12