昨天在寫頁面的時候遇到一個很奇怪的問題，我想把頁面裡面的table元素的高度在css檔案裡面進行設定為0，可是用 height: 0; 這句話一直沒有效果，最後我換用了ul才達到了想要的效果。不過，這是個問題，今天上午我解決了這個問題。（註：以下以高度設定問題作為示範，寬度設定問題同理）
首先我們看下如下樣本：
代碼：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>table元素的寬度/高度設定問題</title><style type="text/css">ul {border: 1px solid #FF0000;overflow: hidden;}table {border: 1px solid #FF0000;overflow: hidden;}span {border: 1px solid #FF0000;overflow: hidden;}</style></head><body><ul><li>我是ul</li><li>我是ul</li><li>我是ul</li></ul><table border="0" cellspacing="0" cellpadding="0"><tr><td>我是table</td></tr><tr><td>我是table</td></tr><tr><td>我是table</td></tr></table><span>我是span</span></body></html>
效果如下：
然後我們在css中給每個標籤元素都加上一句 height: 0; 即：
ul {height: 0;border: 1px solid #FF0000;overflow: hidden;}table {height: 0;border: 1px solid #FF0000;overflow: hidden;}span {height: 0;border: 1px solid #FF0000;overflow: hidden;}
我們再把table 的 高度設定為一個大於其內容高度的值，即 height: 200px;
效果如下：
從上面的運行效果我們可以看出，只有 ul 的高度確實被設定為 0 了，而 table 的高度卻並沒有被設定為0，但是當設定的高度值大於它的內容高度的時候，它又明明有作用的嘛，這個table好像可以又不可以設定高度了，這是為什麼呢。（當然，我們要首先排除table不願意變“矮”這樣一個心理因素）
我的個人理解如下：
我們知道 ul 元素和 table 元素都是區塊層級元素，是可以直接設定其寬高值，而span是行內元素，預設情況下是不可以設定其寬高值的，那麼span沒有高度為零的效果我們可以理解，不是它的錯嘛。可是 table 竟也不待見 height: 0; ，這就要好好和它講講道理了，畢竟同樣是 區塊層級元素，人家（ul）就是很老實規矩的。剛剛運行效果一出，細心的你或許早已發現，table元素的寬也和ul不同，不是100%，而是auto的（看來table還有不願意變“胖”的心理，哈哈），但是後面的span元素作為行內元素卻又沒有緊跟著table站在其右側顯示，而是到下一行顯示了，這就令人匪夷所思了，這樣看來這個table好像也不是很純正的區塊層級元素。看到這些現象，我們是不是可以瞬間想到table是不是預設為 inline-block 顯示的哦。好像是和 inline-block 有點像呢，可是呢，人家 inline-block 是不會單獨佔據一行從而把後面的span擠到下面去。說了這麼多，有沒有發現，我們談論的重點都是在與table 的display屬性有關。既然如此，我們何不把它的 display 屬性加上看看。既然它是 block 的，那我們加上 display: block; 看看。正常情況下，似乎這麼一句代碼是多餘的，可是，真的是多餘的嗎。
代碼：
table {display: block;height: 0;border: 1px solid #FF0000;overflow: hidden;}
效果如下：
哈哈，神奇的事情發生了，運行結果竟然是我之前可“預”不可求的效果。（想到昨天，我竟然沒想到用這個，而是直接用ul把table替換了，真的是，一步之遙啊。）
那我們再換成 display: inline-block; 呢。
效果如下：
哇哦，不錯，這下table也是換成了正常的 inline-block “打扮”，既可以設定高度為0，也能夠不那麼霸道地單獨佔據一行了。
如此，給table元素加上它本就擁有的特質（block），它便可以按照它應該有的樣子展示出來了。
雖然到這裡，問題是已經解決了，但是更深層次的原因，即table為何會有那樣怪異的預設樣式，我還沒懂，如果有哪個牛逼之大神看到了我的這個問題，還望您不吝賜教，把您的牛逼之言留下，以協助大家共同進步，非常感謝，謝謝您。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
