使用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)