九宫格布局

近期在群里看见flex布局九宫格的考题

自己也尝试试试，半天，无结果

遂转为div ul table实现的思路

下面是使用table使用的思路

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

上面就三段正常的table代码，简简单单

table {
90%;
height: 90%;
border-spacing:0;
margin: 5% auto;
border-collapse: collapse;
border: none;
}

table tr {
100%;
}

table tr td {
33.3%;
height: 33.3%;
background: #FF5555;
border-left: 1px #fff solid;
border-top: 1px #fff solid;
}
table tr td:first-child{
border-left: none;
}
table tr:first-child td{
border-top: none;
}

这些是css样式代码

td三等分而已，33.33%宽度，高度。有时候九宫格不需要外部的边线。想到添加单独的class去去掉外部边框，但是不利于扩展

使用了:last-child来实现，但是，:last-child只是兼容到ie9+.高级浏览器还可以

又从lost处得知 ：first-child可以兼容到ie7+.遂使用这个。

布局简单，实现简单。

参考：http://www.alloyteam.com/2016/01/let-see-css-world

下载链接：http://files.cnblogs.com/files/leshao/table%E5%AE%9E%E7%8E%B0%E4%B9%9D%E5%AE%AB%E6%A0%BCfirst-child.rar