不用table仅用div标签,利用CSS3的Flexbox属性,实现跨行和跨列的表格或网格

2017/07/23 21:47
阅读数 1.8K

本文作为一个纯CSS3实现网格的示例,在不使用table标签,仅仅利用div标签及flex布局,用flexbox及相关属性来实现一个带有表头和页眉的跨行、跨列的表格。

废话不多讲,直接上代码:

CSS代码如下:

不用table仅用div标签,利用CSS3的Flexbox属性,实现跨行和跨列的表格或网格

HTML代码如下:

不用table仅用div标签,利用CSS3的Flexbox属性,实现跨行和跨列的表格或网格

效果图如下:

不用table仅用div标签,利用CSS3的Flexbox属性,实现跨行和跨列的表格或网格

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部