display设置为table、table-cell、table-row
IE8⽀持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后⼀款⽀持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命⼀击。最终，使⽤CSS布局来制作出类似于table布局的栅格将会变得⼗分迅速和简单。
⼀、为什么不⽤table元素？
⽬前，在⼤多数开发环境中已经不⽤table元素来做⽹页布局了，取⽽代之的是div+css，那么为什么不⽤table元素呢？
⽤DIV+CSS编写出来的⽂件k数⽐⽤table写出来的要⼩。
table必须在页⾯完全加载后才显⽰，没有加载完毕前，table为⼀⽚空⽩，也就是说，需要页⾯完毕才显⽰，⽽div是逐⾏显⽰，不需要页⾯完全加载完毕，就可以⼀边加载⼀边显⽰。
⾮表格内容⽤table来装，不符合标签语义化要求，不利于SEO。
table的嵌套性太多，⽤DIV代码会⽐较简洁。
1、当设置display：table；时，table的padding设置会失效。
1 .table {
2        display: table;
3        margin: 5px;
4        width: 1000px;
5        border:1px solid red;
6
7    }
2、当设置display：table-row；时，margin和padding设置会失效。这⾥我进⾏了设置，可以看出是没有效果的。
1 .row {
2        display: table-row;
3        padding:100px;
4        margin:100px;
5    }
3、当设置display：table-cell；时，margin设置会失效。这⾥我进⾏了设置，可以看出是没有效果的。
1 .cell {
2        display: table-cell;borderbox
3        padding: 10px;
4        vertical-align: middle;/*定义⾏内元素垂直对齐*/
5        height: 300px;
6        border:1px solid green;
7
8        -webkit-box-sizing: border-box;
9        -moz-box-sizing: border-box;
10        box-sizing: border-box;
11    }
4、认识了上⾯的设置的作⽤和注意点以后，我们可以发现可以通过display:table-cell和vertical-align:middle；来进⾏垂直居中设置的，也是运⽤了cell时，vertical-align属性⽣效作⽤。
⼆、要是想要⼀个表格的布局⽅式怎么办？
可以⽤display:table来解决。
display:table系列⼏乎是和table系的元素相对应的，请看下表：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。