基于CSS属性display:table的表格布局的使用_html/css_动视

基于CSS属性display:table的表格布局的使用_html/css

2020-11-27 16:22:04 责编:小采

项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用 HTML标签即可

一、CSS display属性的表格布局相关属性的解释：

table 此元素会作为块级表格来显示（类似

），表格前后带有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示（类似

）。

table-header-group 此元素会作为一个或多个行的分组来显示（类似

）。

table-footer-group 此元素会作为一个或多个行的分组来显示（类似

）。

table-row 此元素会作为一个表格行显示（类似

）。

table-column-group 此元素会作为一个或多个列的分组来显示（类似

）。

table-column 此元素会作为一个单元格列显示（类似

）

table-cell 此元素会作为一个表格单元格显示（类似

和

）

table-caption 此元素会作为一个表格标题显示（类似

）

二、示例代码

1、普通表格

 1 2  3  4  5 display普通表格 6 13 14 15 16 17 省份/直辖市18 GDP(亿元)19 增长率20 21 22 广东23 7281224 8.0%25 26 27 河南28 3701029 8.3%30 31 32 江苏33 7011634 8.5%35 36 37 
38

运行效果

2、列合并实现表格

实现思路：基于display:table的表格实现，没有

的rowspan和colspan单元格合并的实现，所以曲折实现，将表格每行单独嵌套一个的表格，这样在嵌套的表格内部，单元格合并就能通过控制嵌套表格的行数和列数以及单元格的宽高来实现

 1 2  3  4  5 基于display列合并表格 6 19 20 21 22 23 24 25 26 27 省份／直辖市28 GDP(亿元)29 增长率30 31 32 33 34 35 36 37 38 广东39 7281240 8.0%41 42 43 44 45 46 47 48 49 河南50 3701051 8.3%52 53 54 55 56 57 58 59 60 江苏61 7011662 8.5%63  65 66 67 68 69 70 71 各省／直辖市GDP平均增长率72 8.26%73 74 75 76 77 78 
79

运行效果

3、行合并表格

行合并的实现思路：与列合并的实现思路类似，将有单元格合并的列单独嵌套一个display为table的DIV，高度=单行高*单元格合并数目的倍数，同行的其他列同样均单独嵌套DIV，实例代码如下

 1 2  3  4  5 基于display的行合并表格 6  19  20  21 22 23 24 25 26 27 省份／直辖市 28 GDP(亿元) 29 增长率 30 31 32 33 34 35 36 37 38 广东 39 72812 40 8.0% 41 42 43 44 45 46 47 48 49 50 51 52 53 河南 54 55 56 57 58 江苏 59 60 61 62 63  65 66 67 37010 68 69 70 71 72 70116 73 74 75 76 77 78 79 80 81 82 83 8.4% 84 85 86 87 88  90 91 92 93 94 95 96 各省／直辖市GDP平均增长率 97 8.26% 98 99 100 101 102 103 
104

运行效果：

END

下载本文

显示全文

全部频道

一、CSS display属性的表格布局相关属性的解释：

二、示例代码

1、普通表格

2、列合并实现表格

3、行合并表格