CSS display:table屬性用法解析

作者：admin 2010-09-16 10:04:50

當IE8發布時，它將支持很多新的CSS display屬性值，包括與表格相關的屬性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，這里向大家描述一下CSS display:table的用法。

本節和大家重點討論一下CSS display:table的使用，當IE8發布時，它將支持很多新的CSS display屬性值，包括與表格相關的屬性值，CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。

CSS display:table屬性

當IE8發布時，它將支持很多新的CSS display屬性值，包括與表格相關的屬性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，它也是***一款支持這些屬性值的主流瀏覽器。它標志著復雜CSS布局技術的結束，同時也給了HTML表格布局致命一擊。最終，使用CSS布局來制作出類似于table布局的柵格將會變得十分迅速和簡單。

網頁元素應用上那些與表格相關的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。

使用CSS表格

CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如，“CSS display:table;”的CSS聲明能夠讓一個HTML元素和它的子節點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產生因為使用了table那樣的制表標簽所導致的語義化問題。

在深入了解這種方法之前，讓我們先來寫份HTML文檔實例：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns=http://www.w3.org/1999/xhtml
lang="en-US"> 
<head> 
?HTMLheadcontent…  
</head> 
<body> 
<dividdivid="wrapper"> 
<dividdivid="header"></div> 
<dividdivid="main"> 
<dividdivid="nav"> 
?navigationcolumncontent…  
</div> 
<dividdivid="extras"> 
?newsheadlinescolumncontent…  
</div> 
<dividdivid="content"> 
?mainarticlecontent…  
</div> 
</div> 
</div> 
</body> 
</html>

這份HTML源代碼滿足了內容呈現方面的要求。先是導航欄，然后是附加欄，***是內容欄。我們同樣需要將以下CSS樣式應用上去：

#main{  
display:table;  
border-collapse:collapse;  
}  
 
#nav{  
display:table-cell;  
width:180px;  
background-color:#e7dbcd;  
}  
 
#extras{  
display:table-cell;  
width:180px;  
padding-left:10px;  
border-right:1pxdotted#d7ad7b;  
}  
 
#content{  
display:table-cell;  
width:380px;  
padding-left:10px;  
}

這種基于表格的新CSS布局方式能夠正確的在IE8、Firefox、Safari和Opera（譯者注：包括FF2/FF3/Google都通過了測試）中顯示出來。下面這張圖片是它在IE8中的樣子：

我們輕松實現了三欄等高布局，而無需使用偽造背景圖片之類的技巧，更不用擔心定位和清除浮動的問題！

【編輯推薦】

使用CSS display:none時注意事項
CSS display:inline和float:left兩者區別
深入探究DIV CSS布局中position屬性用法
CSS屬性display:inline-block使用揭秘
CSS display:block顯示布局錯亂解決方案

責任編輯：佚名來源： hi.baidu.com

CSS display:table