CSS 之 display:table

使用CSS表格
CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。
在深入了解这种方法之前，让我们先来写份HTML文档实例：

<div id="wrapper">
<div id="main">
<div id="nav">? navigation column content…</div>
<div id="extras">? news headlines column content…</div>
<div id="content">? main article content…</div>
</div>
</div> 

这份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: 1px dotted #d7ad7b;
}
#content {
display: table-cell;
width: 380px;
padding-left: 10px;
} 

这种基于表格的新CSS布局方式能够正确的在IE8、Firefox、Safari和Opera（译者注：包括FF2/FF3/Google都通过了测试）中显示出来。下面这张图片是它在IE8中的样子：
 
我们轻松实现了三栏等高布局，而无需使用伪造背景图片之类的技巧，更不用担心定位和清除浮动的问题！

它是怎样实现的？
你可以给HTML元素指定与表格相关的display属性值，使得它们像表格元素那样渲染。以下是这些可用的display属性值：

table          使该元素按table样式渲染
table-row      使该元素按tr样式渲染
table-cell     使该元素按td样式渲染
table-row-group      使该元素按tbody样式渲染
table-header-group   使该元素按thead样式渲染
table-footer-group   使该元素按tfoot样式渲染
table-caption        使该元素按caption样式渲染
table-column         使该元素按col样式渲染
table-column-group   使该元素按colgroup样式渲染 

其他有用的表格属性
当使用CSS表格时，因为这些元素遵从table布局的普通规则，所以你还可以给它们应用其它表格相关的CSS属性。下面是一些派得上用场的属性：
table-layout
将table-layout属性设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。这在固定宽度布局中非常有用，例如我们最上面的那段布局代码。
Border-collapse
和普通的HTML表格一样，你可以使用border-collapse属性来定义你的table布局元素之间使用何种形式的边框，是共用边框（赋值为collapse）还是使用各自独立的边框（赋值为separate）。
Border-spacing
如果你声明了“border-collapse:separate;”，那么你就可以使用border-spacing属性来定义相邻两个单元格边框间的距离。

制作完美的栅格
制作等高栅格对于传统CSS布局技术来说已经成为一个难题，然而使用合适的CSS表格则很容易实现。例如，如果我们想制作一个包含图片和标题的影像图库栅格（如下图），使用CSS表格很快就能搞定。
 
以下是我们这个影像图库的代码：

<div class="grid">
<div class="row">
<div class="image"><img src="images/photo1.jpg" alt="A Lily" />
A lily in the gardens of The Vyne Country House</div>
<div class="image"><img src="images/photo3.jpg" alt="A Fuchsia plant" />
Fuchsia plant in my garden</div>
</div>
<div class="row">
<div class="image"><img src="images/photo2.jpg" alt="A crazy looking Allium flower" />
A crazy looking flower</div>
<div class="image"><img src="images/photo4.jpg" alt="A Robin sitting on a fence" />
This robin has been visiting our garden over the summer.
He is very friendly and doesn't seem to be too worried about sharing the garden with us.</div>
</div>
</div> 

每张图片被一个img标签引用，它的标题包含在P元素中，它们均被包含在一个类名为“image”的div元素中。同一行的div被一个类名为“row”的div元素包含，整个影像图库被一个类名为“grid”的div元素包含。
实现这个布局的CSS代码十分简单：

.grid {
display: table;
border-spacing: 4px;
}
.row {
display: table-row;
}
.image {
display: table-cell;
width: 240px;
background-color: #000;
border: 8px solid #000;
vertical-align: top;
text-align: center;
}
.image p {
color: #fff;
font-size: 85%;
text-align: left;
padding-top: 8px;
} 

以上CSS代码简明易懂，可能你还注意到了我们是怎样通过border-spacing属性来控制单元格图像之间的距离的。制作一张栅格布局变得再简单不过了，同时我们还可以避免那些使用float元素实现等高布局所带来的麻烦。

转自：http://www.jb51.net/css/67406.html