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

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

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

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

CSS代码如下:

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

HTML代码如下:

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

效果图如下:

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部