本文共 3943 字,大约阅读时间需要 13 分钟。
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的display:table的DIV,然后在嵌套的表格DIV内部通过控制行列数和行列的高度,实现单元格合并。个人建议全新实现使用<table> HTML标签即可
1、普通表格
display普通表格 省份/直辖市GDP(亿元)增长率广东728128.0%河南370108.3%江苏701168.5%
实现思路:基于display:table的表格实现,没有<table>的rowspan和colspan单元格合并的实现,所以曲折实现,将表格每行单独嵌套一个独立的表格,这样在嵌套的独立表格内部,单元格合并就能通过控制嵌套表格的行数和列数以及单元格的宽高来实现
基于display列合并表格 省份/直辖市GDP(亿元)增长率广东728128.0%河南370108.3%江苏701168.5%各省/直辖市GDP平均增长率8.26%
行合并的实现思路:与列合并的实现思路类似,将有单元格合并的列单独嵌套一个display为table的DIV,高度=单行高*单元格合并数目的倍数,同行的其他列同样均单独嵌套DIV,实例代码如下
基于display的行合并表格 省份/直辖市GDP(亿元)增长率广东728128.0%河南江苏37010701168.4%各省/直辖市GDP平均增长率8.26%
一列两列两列一列三列三列三列一列四列四列四列四列