CSS2中display:table属性的用法详解

           想必大家都已经知道了css属性display的一些常见属性值，比如none，block，inline-block等等，今日我在看一个效果代码的时候，碰到一个之前从未使用过的属性值，就是它了，display：table。随后从网上以及手册中搜索了一下它的具体用法，在此总结下来分享给大家，希望能对大家有所帮助～

           我们都知道table是已经被W3C不再提倡使用的表格布局，所以大家可能猜到了，display：table就是与表格相关的显示方式，display的所有属性，如下：

       值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block行内块元素。（CSS2.1 新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。markerCSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。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>）inherit规定应该从父元素继承 display 属性的值。

使用CSS表格

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

兼容性

       该属性在IE8以上以及Firefox,Chrome,Safari等浏览器上均可以支持，因为它本身也是个CSS2的属性。