项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的display:table的DIV,然后在嵌套的表格DIV内部通过控制行列数和行列的高度,实现单元格合并。个人建议全新实现使用<table> HTML标签即可
一、CSS display属性的表格布局相关属性的解释:
- table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
- table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
- table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
- table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
- table-row 此元素会作为一个表格行显示(类似 <tr>)。
- table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
- table-column 此元素会作为一个单元格列显示(类似 <col>)
- table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
- table-caption 此元素会作为一个表格标题显示(类似 <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 <