不用table僅用div標籤,利用CSS3的Flexbox屬性,實現跨行和跨列的表格或網格

CSS 科技 IT豆豆 2017-07-16

本文作為一個純CSS3實現網格的示例,在不使用table標籤,僅僅利用div標籤及flex佈局,用flexbox及相關屬性來實現一個帶有表頭和頁眉的跨行、跨列的表格。

不用table僅用div標籤,利用CSS3的Flexbox屬性,實現跨行和跨列的表格或網格

廢話不多講,直接上代碼:

CSS代碼如下:

不用table僅用div標籤,利用CSS3的Flexbox屬性,實現跨行和跨列的表格或網格

HTML代碼如下:

不用table僅用div標籤,利用CSS3的Flexbox屬性,實現跨行和跨列的表格或網格

效果圖如下:

不用table僅用div標籤,利用CSS3的Flexbox屬性,實現跨行和跨列的表格或網格