table 布局最大的特點
1、同行等高
2、寬度自動調節
那么table-cell是不是具備這個特點呢？答案是yes，為什么呢？css中有一個有意思的規則“創建匿名表格元素”。
拿table-cell來扯，就是，當某個元素被設置為display:table-cell的時候，如果她的父節點不是display：table-row，爺爺節點不是display:table，這個兒子生出了他的爸爸和爺爺（瀏覽器會自動創建者兩個匿名盒對象）
用途
1、等高布局
2、和vertical-align：middle搞在一起可以做大小不固定元素的垂直居中布局（還有多行文本垂直居中）
3、利用列寬度自動調節這個特點可以作左固定右自適應布局
<style type="text/css">
.left{float:left; width:260px; padding:10px; margin-right:10px; border:1px solid #ccc;}
.classtd{ display: table-cell; width:3000px; padding:10px; border:1px solid #ccc;}
</style>
<div class="left">我是左邊欄目</div>
<div class="classtd">
我是自適應的右邊
</div>
display:table-cell 元素生成的匿名table默認table-layout:auto。寬度將基於單元格內容自動調整。所以設置width:3000px的用途是盡可能的寬的意思。這樣就可以達到自適應的效果。
display:table-cell屬性指讓標簽元素以表格單元格的形式呈現，類似於td標簽。
單元格有一些比較特別的屬性，例如元素的垂直居中對齊，關聯伸縮等，
與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float, position:absolute，所以，在使用display:table-cell與float:left或是position:absolute屬性盡量不要同用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫脫的一個td標簽元素了。
單元格有一些比較特別的屬性，例如元素的垂直居中對齊，關聯伸縮等，
與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float, position:absolute，所以，在使用display:table-cell與float:left或是position:absolute屬性盡量不要同用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫脫的一個td標簽元素了。
.fix{*zoom:1;}
.fix:after{display:block; content:"clear"; height:0; clear:both; visibility:hidden;}
.l{float:left;}
.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}
<div class="fix">
<div class="l"></div>
<div class="cell"></div>
</div>
對於連續單詞字符換行問題嘗試添加以下代碼
display:table; width:100%;
table-layout:fixed; word-wrap:break-word;