1.给元素的display属性添加为以下值
table ： <table>
table-caption ：<caption>
table-cell ： <td>
table-row ：<tr>
table-row-group ：<tbody>
table-column ： <col>
table-column-group ：<colgroup>
table-header-group ： <thead>
table-footer-group ： <tfoot>
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属性来定义相邻两个单元格边框间的距离。