<div>Not a cell</div>
上面的三个类名为“cell”的div元素均被设置为“display:table-cell;”,它们将会像一个单行表格的三个单元格一样并列排布。最后一个div元素则不会被包含在这一表格行当中,因为它没有被设置成“display:table-cell;”。
如果某个元素被设置为“display:table-row;”,而它的父节点没有被设置为“display:table;”(或者“display:table-row-group;”),浏览器将会创建一个被设置为“display:table;”的匿名盒对象来嵌套它,与之相邻的属性为“display: table-row;”的兄弟节点也都会被包含其中。同样,如果某个元素被设置为“display:table-row;”,但它的内部却缺少“display:table-cell;”的元素,那么一个匿名的table-cell将会被创建,用来包含该table-row中的所有元素。
请看以下代码:
<div class=”row”>ROW A</div>
<div class=”row”>ROW B</div>
<div>Not a row</div>
上面两排类名为“row”的div元素被设置了“display:table-row;”属性,它们将会像单列表格中的两行一样依次排列。最后一个div元素则不会包含在这个匿名的table中。
以此类推,如果某个元素的display属性值被设置为与表格相关的值,如table-row-group、table-header-group、 table-footer-group、table-column、table-column-group以及table-caption,但同时又没有一个被设置为“display:table;”的父元素,那么一个匿名的盒对象将会被创建用来包含该元素和它的某些兄弟节点。
其他有用的表格属性
当使用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表格很快就能搞定。










