網頁製作 TD也可以溢出隱藏顯示_HTML/Xhtml_網頁製作
- WBOY原創
- 2016-05-16 16:42:152009瀏覽
或許我這篇文章一取這樣的名字，就會有人要問了：你怎麼還在關注table啊，那早就過時了…趕緊Xhtml…div好…ul好…ol好…dl好…完了，不知道還有什麼好了。
table真的過時了麼？你真的了解table麼？你真的會用table麼？
打口水仗不是我們要做的，留給那些時間很充裕的人吧。
言歸正傳：
不記得是什麼時候，有人在用table模擬DataGrid的時候說，為什麼td超出設定為固定寬度的文字不能隱藏，而是會直接換行呢？
是的，事實確實如此，如：
運行如上程式碼，你會發現單元格里超過固定寬度的文字不會被隱藏掉，而是換行顯示了，顯然，這並不是我的本意。
看起來，這似乎是table的一個特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的組合，說到底就是white-space: nowrap這個東東沒起作用，所以看起來overflow:hidden就失效了。 {註：如果是一連串的無意義字元則可生效，例如：
［解決方案一：］
後來有人提到使用百分比寬度就可以了，經測試，確實可以，稍微將第一段的其中幾行樣式修改一下，其它的不變：
.col1 {width:20%;}
. col2 {width:40%;}
.col3 {width:40%;}
將修改後的程式碼執行後，會發現，超出寬度的文字果然被隱藏了，想要的效果似乎得到了。
事實上使用百分比寬度確實可以解決這個文字隱藏的問題，但這似乎並不是想要的最佳的解決方案，因為有的時候我們需要的是一個固定的寬度，而不是百分比寬度。
而這一切的根源就在於如何使得單元格內的文字不換行在一行內顯示。
［解決方案二：］
要達到這個要求，除了使用樣式，我們也許還會想到一個許久不用了的標籤
做了這個修改，會發現，效果確實達到，是不是該興奮呢？不，這似乎還不是最佳的解決方案，因為畢竟使用了一個許久不用且不推薦使用的元素標記，這多少讓人覺得有點不爽。
沿著這個思路，我換了一個角度來考慮這個問題，發現問題迎刃而解。
既然在固定寬度的單元格內無法只簡單的給th,td加上white-space:nowrap，那麼我們在固定寬度的單元格內再加一個標記元素呢？
最佳方案：
提示：您可以先修改部分代码再运行
运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。
{还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文}
其实table是一个有趣，可玩性很高东东。我们不应该带着有色眼睛去看它，因为它有它存在的道理。
之后会继续写一些关于table的文章，也作自娱之用。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn