display：table 表格布局

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的用途是尽可能的宽的意思。这样就可以达到自适应的效果。
http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于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;

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/