table佈局以及table表格
阿新 • • 發佈：2018-12-26
<!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;background-color:#E5E5E5;} .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>
