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>