http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
by zhangxinxu from http://www.zhangxinxu.com
本文位址：http://www.zhangxinxu.com/wordpress/?p=1187
一、display:table-cell屬性簡述
display:table-cell
屬性指讓标簽元素以表格單元格的形式呈現，類似于
td
标簽。目前IE8+以及其他現代浏覽器都是支援此屬性的，但是IE6/7隻能對你說sorry了，這一事實也是大大制約了
display:table-cell
屬性在實際項目中的應用（寫于2016年8月24日：時代在變，當下，是時候登上舞台了）。
我們都知道，單元格有一些比較特别的屬性，例如元素的垂直居中對齊，關聯伸縮等，是以
display:table-cell
還是有不少潛在的使用價值的，雖說IE6/7不支援此屬性，但是幸運的是，IE6/7一些亂糟糟的屬性與渲染，我們可以其他方法實作同樣或是類似的效果。
與其他一些display屬性類似，
table-cell
同樣會被其他一些CSS屬性破壞，例如
float
,
position:absolute
，是以，在使用
display:table-cell
與
float:left
或是
position:absolute
屬性盡量不用同用。設定了
display:table-cell
的元素對寬度高度敏感，對
margin
值無反應，響應
padding
屬性，基本上就是活脫脫的一個td标簽元素了。
二、display:table-cell與大小不固定元素的垂直居中
使用
display:table-cell
讓大小不固定元素垂直居中已經是很老的方法了，關于此應用，我已經在“大小不固定的圖檔、多行文字的水準垂直居中”這篇文章中有過介紹。
友善閱讀，這裡再次展示下代碼：
/*這裡的大小是根據高寬上限128像素圖檔設定的*/
div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}
div img{vertical-align:middle;}
結果如下圖：
這裡有個demo位址，裡面有
display:table-cell
實作大小不固定圖檔垂直居中的效果展示，您可以狠狠地點選這裡。
二、display:table-cell與兩欄自适應布局
就在前不久，看facebook好友動态清單頁面前端代碼的時候才發現原來
display:table-cell
可以用在兩欄的自适應布局上。
雖然IE6/7不認識
display:table-cell
，但是虧了其一向自以為是的渲染與解析，我們可以很幸運的使用其他屬性實作幾乎一緻的效果。
您可以狠狠地點選這裡：display:table-cell下兩欄自适應布局demo
代碼展示：
本例中，左側為頭像，右側内容自适應。其中頭像部分使用了
float
屬性，左浮動，IE8+以及Firefox、Chrome、Opera等現代浏覽器右側使用了
display:table-cell
屬性，結果就自适應了，很簡單的代碼，很神奇的效果。
OK，對于不認識
display:table-cell
屬性的IE6/7呢？哦呵呵，很簡單，使用
display:inline-block
屬性代替
display:table-cell
就完全ok的啦！
原因在于：IE6/7下block屬性的元素對inline-block屬性是有反應，但是卻不是純潔的反應，而是怪蜀黍看到粉嫩小蘿莉的一點邪念，就是讓元素有個怪異的haslayout屬性。//zxx:大家似乎都喜歡用haslayout解析一些老IE下的一些怪異現象，但我自己打心底裡是不認同這個概念。
如果IE6/7是很标準的純潔的解釋
inline-block
屬性的話，是無法實作自适應的，右側的文字描述内容會跑到頭像的下面，哦呵呵~~有點負負得正，以毒攻毒的意味。代碼如下：
display:table-cell; *display:inline-block; 就萬事大吉，收工回家了。
在本例demo中，右側内容足夠多，是以寬度完整的撐開了，如果内容有限，則寬度就是内容的寬度，此時想要讓某個元素（例如關閉按鈕）右側定位就會有問題，解決方法就是定義一個非常寬的寬度，就像上面facebook截圖中的CSS屬性一樣，是以，考慮到各種情況，更健壯耐用的CSS代碼應如下：
display:table-cell; *display:inline-block; width:2000px; *width:auto; 或者使用：
display:table-cell; width:2000px; *width:auto; *zoom:1; 這種兩欄的自适應布局，不僅不要分别丈量與計算兩列的寬度，連“頁面重構鑫三無準則 之無寬度準則”中absolute自适應布局的頭像寬度都不需要亮了，可以說是更加懶惰，更加直接的好方法。
三、display:table-cell下的等高布局
table表格中的單元格最大的特點之一就是同一行清單元素都等高。是以，很多時候，我們需要等高布局的時候，就可以借助
display:table-cell
屬性。說到
table-cell
的布局，不得不說一下“匿名表格元素建立規則”：
CSS2.1表格模型中的元素，可能不會全部包含在除HTML之外的文檔語言中。這時，那些“丢失”的元素會被模拟出來，進而使得表格模型能夠正常工作。所有的表格元素将會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table- cell的三層嵌套關系。
舉個例子吧，如果我們為元素使用“display:table-cell;”屬性，而不将其父容器設定為“display:table-row;”屬性，浏覽器會預設建立出一個表格行，就好像文檔中真的存在一個被聲明的表格行一樣。如果您還不是很了解，可見參見支付寶UED的“基于display:table的CSS布局”一文。//zxx:支付寶今年的招牌廣告做得很贊的~~
實作等高布局，毫無疑問，
display:table-cell
是首選，這就好比鼹鼠，生下來就是為了打洞用的。考慮到匿名建立表格元素的問題，所有
table-cell
元素外一定要留有一個用來包裹的标簽。于是，我們有類似下面的CSS代碼：
.list_row{display:table-row;}
.list_cell{display:table-cell; width:30%; padding:1.6%; background-color:#f5f5f5;}
/*中間一個元素背景淡藍，有别于兩邊的淡灰色*/
.list_center{background-color:#f0f3f9;}
結果在現代浏覽器下（如下Firefox3.6下截圖）：
您可以狠狠地點選這裡：table-cell等高布局demo
對于不支援display:table-cell屬性的IE6/7浏覽器，又當如何解決呢？
我們可以使用“補差等高法”，就是一個一個很大的
margin-bottom
負值配上一個同樣大小的
padding-bottom
值，本例中為了執行個體需要，
margin-bottom
值就百來像素。顯然，由于兩者原理不同，難免需要用到hack，是以demo完整CSS代碼如下：
.list_row{display:table-row; overflow:hidden;}
.list_cell{display:table-cell; width:30%; margin-bottom:-100px; padding:1.6%; *padding-bottom:110px; background-color:#f5f5f5; *float:left;}
.list_center{background-color:#f0f3f9;}
認識
display:table-cell
屬性的元素對
margin
屬性不敏感，是以上面
margin-bottom
屬性前沒有加*号。HTML結構代碼如下：
<div class="list_row">
<div class="list_cell">你一定也有過這種感覺的。...羅蘭《寂寞的感覺》</div>
<div class="list_cell list_center">作為一個被基阿異捅過...水，四積陰功五讀書。</div>
<div class="list_cell">奔波了一...永遠幸福快樂！</div>
</div>
//zxx:“補差等高法”雖然有效，也有相容性，但是會帶來一些潛在的問題，不宜多用。
四、display:table-cell下的清單布局
這裡的清單布局專指橫向repeat的布局，就像下圖所示的：
一般這類布局都是使用浮動的。但是浮動布局的不足在于：一是需要清除浮動造成影響；二是不支援不定高清單的浮動。替代浮動布局的方法是有的，如果深究細節以及一些思想，方法還不少。其中有一個方法就是使用
display:table-cell
。
當然，說句心裡話，将
display:table-cell
屬性用在清單元素布局上，有點類似于張飛繡衣服，大馬拉小車，優勢并沒有多大發揮，但是，畢竟也算浮動布局的一個備用替換方案。我的下一篇文章将會詳細講解浮動布局的替換方案，其中
table-cell
方法可以說是裡面最不好的一個方法，本着過渡和熱身的目的，這裡隻簡單講過。
首先是效果：
您可以狠狠地點選這裡：display:table-cell下的清單布局
可以看到即使子產品高度不一緻，也不會産生浮動布局可能産生的錯位。
由于table-cell需要每行包裹一個獨立的标簽，是以，在背景repeat輸出的時候，需要兩次循環，而是列數是限死的（與浮動布局一樣）。對于簡單的清單，使用display:table-cell是很難看到什麼優勢的，但是，如果清單複雜，資料多，内容細，display:table-cell可能會像大S訂婚的傳聞那樣讓人震驚。
好，點到為止，就說這些。我的下一篇文章還會講到此屬性的布局的。
更新于2016年8月24日
display:table-cell
下的清單布局最适用的場景是：清單個數不固定，但是，無論清單幾個，都平分容器空間。什麼意思呢？就是如果4個清單，希望每個寬度25%，3個就33.3333%，2個清單希望每個寬度50%。此時，沒有比
display:table-cell
更合适的技術了。
父級設定
display:table
同時寬度為容器寬度，或者直接
width:100%
，此時，
display:table-cell
子元素就會自動等分。
五、結語
對于
display:table-cell
，我自己其實用的并不多，畢竟其特殊之處就在于垂直居中，等高，水準級聯，匿名建立等特性，其他種種屬性可以使用其他更好的
display
屬性代替的。但是話說回來，不太使用display:table-cell屬性的真正的原因可能是對該屬性的了解的還不夠深入，可能該屬性本身是存在很多非常實用的應用，但是自己由于掌握不夠而不知道。是以，要是哪位同行知道
display:table-cell
其他一些不錯的應用的話，歡迎大力補充，不甚感謝！
最後，時間倉促，資質有限，文中要是有表述不準确的地方還望見諒，歡迎嚴厲地指正。
轉載于:https://www.cnblogs.com/beimingbingpo/p/8965791.html