div + css 實現表格
阿新 • • 發佈：2018-12-28
一、
div + css 實現的表格，相比於table標籤，有如下優點：
1. 提高頁面瀏覽速度。不再需要，在每一列，逐行比對列寬，看誰最寬就用誰的寬度；
在每一行裡，逐列比對行高，看誰最高，就用誰的高度。
2. 結構清晰，樣式和內容相分離，更好地控制頁面佈局、字型，使頁面真正賞心悅目。
二、
上程式碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>div+CSSForTable2</title> <style> .table{ /*此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。*/ display:table; /*border-collapse:collapse;*/ border-collapse:separate; border:1px solid #ccc; } .table-caption{ /*此元素會作為一個表格標題顯示（類似 <caption>）*/ display:table-caption; margin:0; font-size:16px; } .table-header-group{ /*此元素會作為一個或多個行的分組來顯示（類似 <thead>）。*/ display:table-header-group; background:#eee; font-weight:bold; } .table-row-group{ /*此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。*/ display:table-row-group; } .table-footer-group{ /*此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。*/ display:table-footer-group; } ul{ list-style:none; } .table-row{ /*此元素會作為一個表格行顯示（類似 <tr>）。*/ display:table-row; } .table-cell{ /*此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）*/ display:table-cell; padding:0 5px; border:1px solid #ccc; } .table-row-group .table-row:hover, .table-footer-group .table-row:hover{ background:#f6f6f6; color:green; font-weight: bold; } .table-column-group{ /*此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。*/ display:table-column-group; } .table-column{ /*此元素會作為一個單元格列顯示（類似 <col>）*/ display:table-column; width:100px; } </style> </head> <body> <div class="table"> <h2 class="table-caption">花名冊：</h2> <!--此行程式碼，必不可少，用途：控制列的樣式。--> <div class="table-column-group"> <div class="table-column"></div> <div class="table-column"></div> <div class="table-column"></div> </div> <div class="table-header-group"> <ul class="table-row"> <li class="table-cell">序號</li> <li class="table-cell">姓名</li> <li class="table-cell">年齡</li> </ul> </div> <div class="table-row-group"> <ul class="table-row"> <li class="table-cell">1</li> <li class="table-cell">John</li> <li class="table-cell">19</li> </ul> <ul class="table-row"> <li class="table-cell">2</li> <li class="table-cell">Mark</li> <li class="table-cell">21</li> </ul> <ul class="table-row"> <li class="table-cell">3</li> <li class="table-cell">Kate</li> <li class="table-cell">26</li> </ul> </div> <div class="table-footer-group"> <ul class="table-row"> <li class="table-cell">footer</li> <li class="table-cell">footer</li> <li class="table-cell">footer</li> </ul> </div> </div> </body> </html>