display:table

display:table已经基本取代table元素，主要原因为

1. table必须在页面完全加载后才显示，而div是逐行显示
2. 非表格内容用table来装，不符合标签语义化要求，不利于SEO
3. table的嵌套性太多，用DIV代码会比较简洁

• table （类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。
• inline-table （类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。
• table-row-group （类似 <tbody>）此元素会作为一个或多个行的分组来显示。
• table-header-group （类似 <thead>）此元素会作为一个或多个行的分组来显示。
• table-footer-group （类似 <tfoot>）此元素会作为一个或多个行的分组来显示。
• table-row （类似 <tr>）此元素会作为一个表格行显示。
• table-column-group （类似 <colgroup>）此元素会作为一个或多个列的分组来显示。
• table-column （类似 <col>）此元素会作为一个单元格列显示。
• table-cell （类似 <td> 和 <th>）此元素会作为一个表格单元格显示。
• table-caption （类似 <caption>）此元素会作为一个表格标题显示。

匿名表格元素创建规则

和表格元素一样，具有表格样式的元素当不存在符合要求的父元素时，那些“丢失”的元素会被模拟出来，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

<style>
  .table {
    display: table;
    border: 1px solid #cccccc;
    margin: 5px;
  }

  .row {
    display: table-row;
    border: 1px solid #cccccc;
  }

  .cell {
    display: table-cell;
    border: 1px solid #cccccc;
    padding: 5px;
  }
</style>

<div class="table">
  <div class="row">
    <div class="cell">张三</div>
    <div class="cell">李四</div>
    <div class="cell">王五</div>
  </div>
  <div class="row">
    <div class="cell">张三</div>
    <div class="cell">李四</div>
    <div class="cell">王五</div>
  </div>
</div>

等价于

  <div class="row">
    <div class="cell">张三</div>
    <div class="cell">李四</div>
    <div class="cell">王五</div>
  </div>
  <div class="cell">张三</div>
  <div class="cell">李四</div>
  <div class="cell">王五</div>

一些特殊影响

display: table时padding会失效
display: table-row时margin、padding同时失效
display: table-cell时margin会失效
display: table-cell中的块级元素可以受到vertical-align影响

其他属性

设为display:table或display:inline-table的元素还具有如下属性

• table-layout
  automatic:时每列宽度由该列内最宽的一格决定
  fixed:时每列宽度固定为表格总宽/列数
• border-collapse
  collapse:合并边框
  separate:分离边框(此时可用border-spacing设置边框距离)