项目改造中遇到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 26 31 36 运行效果
艺帆集团公司企业网站源码1.7.5
艺帆集团公司企业网站源码基于艺帆企业cms制作，全站div+css 制作；它包含了单页设置、单页分类设置、新闻、产品、下载、在线招聘、在线留言、幻灯管理、友情链接管理和数据库备份等功能。 DIV+CSS布局优势一.精简代码，减少重构难度。网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦
下载
立即学习“前端免费学习笔记（深入）”；
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 45 56 67 68 69 70 71 各省／直辖市GDP平均增长率 72 8.26% 73 74 75 76 77 运行效果
立即学习“前端免费学习笔记（深入）”；
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 92 93 94 95 96 各省／直辖市GDP平均增长率 97 8.26% 98 99 100 101 102 运行效果：
立即学习“前端免费学习笔记（深入）”； END
|
