使用div实现table效果 · PHP笔记

table 此元素会作为块级表格来显示（类似），表格前后带有换行符。 table-row-group 此元素会作为一个或多个行的分组来显示（类似）。 table-header-group 此元素会作为一个或多个行的分组来显示（类似）。 table-footer-group 此元素会作为一个或多个行的分组来显示（类似）。 table-row 此元素会作为一个表格行显示（类似）。 table-column-group 此元素会作为一个或多个列的分组来显示（类似）。 table-column 此元素会作为一个单元格列显示（类似） table-cell 此元素会作为一个表格单元格显示（类似和） table-caption 此元素会作为一个表格标题显示（类似） ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>display普通表格</title> <style type="text/css"> .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; } .table-td { display: table-cell; height: 100%; border: 1px solid gray; text-align: center; vertical-align: middle; } </style> </head> <body> <div class="table"> <div class="table-tr"> <div class="table-th">省份/直辖市</div> <div class="table-th">GDP(亿元)</div> <div class="table-th">增长率</div> </div> <div class="table-tr"> <div class="table-td">广东</div> <div class="table-td">72812</div> <div class="table-td">8.0%</div> </div> <div class="table-tr"> <div class="table-td">河南</div> <div class="table-td">37010</div> <div class="table-td">8.3%</div> </div> <div class="table-tr"> <div class="table-td">江苏</div> <div class="table-td">70116</div> <div class="table-td">8.5%</div> </div> </div> </body> </html> ``` ![](https://img.kancloud.cn/28/dd/28dd8428528b3e75fa52f1bbbce6060d_596x138.png)