html table-cell,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普通表格

.table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}

.table {display: table; width: 80%; border-collapse: collapse;}

.table-tr {display: table-row; height: 30px;}

.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}

.table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}

省份/直辖市

GDP(亿元)

增长率

广东

72812

8.0%

河南

37010

8.3%

江苏

70116

8.5%

2.行合并表格

基于display列合并表格

.table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}

.table {display: table; width: 80%; border-collapse: collapse;}

.table-tr {display: table-row; height: 30px;}

.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}

.table-td {display: table-cell; height: 100%;}

.sub-table {width: 100%;height: 100%;display: table;}

.sub-table-tr {display: table-row; height: 100%;}

.sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}

省份／直辖市

GDP(亿元)

增长率

广东

72812

8.0%

河南

37010

8.3%

江苏

70116

8.5%

各省／直辖市GDP平均增长率

8.26%

3.列合并表格

基于display的行合并表格

.table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}

.table {display: table; width: 80%; border-collapse: collapse;}

.table-tr {display: table-row; height: 30px;}

.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}

.table-td {display: table-cell; height: 100%;}

.sub-table {width: 100%;height: 100%;display: table;}

.sub-table-tr {display: table-row; height: 100%;}

.sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}

省份／直辖市

GDP(亿元)

增长率

广东

72812

8.0%

河南

江苏

37010

70116

8.4%

各省／直辖市GDP平均增长率

8.26%