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

程序员文章站 2022-05-12 19:01:25

...

项目改造中遇到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 此元素会作为一个表格单元格显示（类似

二、示例代码

1、普通表格

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

运行效果

2、列合并实现表格

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

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

的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                     72812
40                     8.0%
41                 
42             
43         
44     
45     46         47             48                 49                     河南
50                     37010
51                     8.3%
52                 
53             
54         
55     
56     57         58             59                 60                     江苏
61                     70116
62                     8.5%
63                 
64             
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                      64                          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                 
 89             
 90         
 91     
 92      93          94              95                  96                     各省／直辖市GDP平均增长率
 97                     8.26%
 98                 
 99             
100         
101     
102 
103 104