<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_table_div_css</title>
<style>
/*div + css 實現的表格，相比於 table 標簽，有如下優點：
1.提高頁面瀏覽速度。
不再需要，在每一列，逐行比對列寬，看誰最寬就用誰的寬度；
在每一行裏，逐列比對行高，看誰最高，就用誰的高度。
2.結構清晰，樣式和內容相分離，更好地控制頁面布局、字體，使頁面真正賞心悅目。
*/
.table {
/*元素作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。*/
display: table;
border-collapse: collapse;
/*border-collapse: separate;*/
border: 1px solid #ccc;
width: 300px;
/*height: 200px;*/
}
.table-caption {
/*元素作為一個表格標題顯示（類似 <caption>）*/
display: table-caption;
margin: 0;
/*font-size: 16px;*/
font-size: 1em;
width: 64px;
}
.table-header-group {
/*元素作為一個或多個行的分組來顯示（類似 <thead>）。*/
display: table-header-group;
/*background: rgba(238,238,238, 0.5);*/
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: purple;
font-weight: bold;
}
.table-column-group {
/*元素作為一個或多個列的分組來顯示（類似 <colgroup>）。*/
display: table-column-group;
}
.table-column {
/*元素作為一個單元格列顯示（類似 <col>）*/
display: table-column;
}
.width1 {
width: 100px;
}
.width2 {
width: 80px;
}
.width3 {
width: 60px;
}
.columm1 {
background: rgba(0, 255, 0, 0.3);
}
</style>
</head>
<body>
<h2 class="table-caption">花名冊：</h2>
<div class="table">
<!此行代碼用於：控制列的樣式。>
<div class="table-column-group">
<div class="table-column width1 columm1"></div>
<div class="table-column width2"></div>
<div class="table-column width3"></div>
</div>
<!如果不寫上一個 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>
<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">序號</li>
<li class="table-cell">姓名</li>
<li class="table-cell">年齡</li>
</ul>
</div>
</div>
</body>
</html>
