table-cell实现制表格

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



  • table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
  • table-row-group 此元素会作为一个或多个行的分组来显示(类似
  • )。
  • table-header-group 此元素会作为一个或多个行的分组来显示(类似
  • )。
  • table-footer-group 此元素会作为一个或多个行的分组来显示(类似
  • )。
  • table-row 此元素会作为一个表格行显示(类似
  • )。
  • table-column-group 此元素会作为一个或多个列的分组来显示(类似
  • )。
  • table-column 此元素会作为一个单元格列显示(类似

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

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

  • 二、示例代码:


    1.普通表格

    
    
    
    
    display普通表格
    
    
    
        
    省份/直辖市
    GDP(亿元)
    增长率
    广东
    72812
    8.0%
    河南
    37010
    8.3%
    江苏
    70116
    8.5%

    2.行合并表格

    
    
    
    
    基于display列合并表格
    
    
    
    
    
    省份/直辖市
    GDP(亿元)
    增长率
    广东
    72812
    8.0%
    河南
    37010
    8.3%
    江苏
    70116
    8.5%
    各省/直辖市GDP平均增长率
    8.26%

    3.列合并表格

    
    
    
    
    基于display的行合并表格
    
    
    
    
    
    省份/直辖市
    GDP(亿元)
    增长率
    广东
    72812
    8.0%
    河南
    江苏
    37010
    70116
    8.4%
    各省/直辖市GDP平均增长率
    8.26%

    你可能感兴趣的:(table-cell实现制表格)