基于CSS属性display:table的表格布局的使用-MySomeDay

项目改造中遇到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     DOCTYPE html  > 
  2     html  > 
  3     head  > 
  4     meta   charset  ="UTF-8"  > 
  5     title  > display普通表格   title  > 
  6     style   type  ="text/css"  > 
  7   .table, .table *   {  margin  :   0 auto  ;   padding  :   0  ;  font-size  :   14px  ;  font-family  :   Arial, 宋体, Helvetica, sans-serif  ;  } 
  8   .table   {  display  :   table  ;   width  :   80%  ;   border-collapse  :   collapse  ;  } 
  9   .table-tr   {  display  :   table-row  ;   height  :   30px  ;  } 
 10   .table-th   {  display  :   table-cell  ;  font-weight  :   bold  ;  height  :   100%  ;  border  :   1px solid gray  ;  text-align  :   center  ;  vertical-align  :   middle  ;  background-color  :  #E5E5E5  ;  } 
 11   .table-td   {  display  :   table-cell  ;   height  :   100%  ;  border  :   1px solid gray  ;   text-align  :   center  ;  vertical-align  :   middle  ;  } 
 12     style  > 
 13     head  > 
 14     body  > 
 15         div   class  ="table"  > 
 16             div   class  ="table-tr"  > 
 17                 div   class  ="table-th"  > 省份/直辖市   div  > 
 18                 div   class  ="table-th"  > GDP(亿元)   div  > 
 19                 div   class  ="table-th"  > 增长率   div  > 
 20             div  > 
 21             div   class  ="table-tr"  > 
 22                 div   class  ="table-td"  > 广东   div  > 
 23                 div   class  ="table-td"  > 72812   div  > 
 24                 div   class  ="table-td"  > 8.0%   div  > 
 25             div  > 
 26             div   class  ="table-tr"  > 
 27                 div   class  ="table-td"  > 河南   div  > 
 28                 div   class  ="table-td"  > 37010   div  > 
 29                 div   class  ="table-td"  > 8.3%   div  > 
 30             div  > 
 31             div   class  ="table-tr"  > 
 32                 div   class  ="table-td"  > 江苏   div  > 
 33                 div   class  ="table-td"  > 70116   div  > 
 34                 div   class  ="table-td"  > 8.5%   div  > 
 35             div  > 
 36         div  > 
 37     body  > 
 38     html  >  

查看更多关于基于CSS属性display:table的表格布局的使用-MySomeDay的详细内容...