标签：
1.给元素的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样式渲染
2.实现简单的三列布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css html</title> <style type="text/css"> .container { display: table; } .row { display: table-row; } .cell { display: table-cell; width: 100px; height: 100px; border: 1px solid blue; padding: 1em; } </style> </head> <body> <div class="container"> <div class="row"> <div class="cell">CELL A</div> <div class="cell">CELL B</div> <div class="cell">CELL C</div> </div> </div> </body> </html>
3.如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样
即以下部分可以省略
<div class=”container”>
<div class=”row”>
.container {
display: table;
}
.row {
display: table-row;
}
4.其他有用的属性
table-layout 将table-layout属性设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。
Border-collapse 定义边框
Border-spacing 声明“border-collapse:separate;”后，可用border-spacing属性来定义相邻两个单元格边框间的距离。
标签：
原文地址：http://www.cnblogs.com/syyy/p/5882669.html
