DIv+CSS实现最简单的表格效果
1.html代码如下：
<html> <head> <title>div+CSS</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">AA</li> <li class="table-cell">123</li> </ul> <ul class="table-row"> <li class="table-cell">2</li> <li class="table-cell">BB</li> <li class="table-cell">222</li> </ul> <ul class="table-row"> <li class="table-cell">3</li> <li class="table-cell">CC</li> <li class="table-cell">333</li> </ul> </div> <div class="table-footer-group"> <ul class="table-row"> <li class="table-cell">表格底部1</li> <li class="table-cell">表格底部2</li> <li class="table-cell">表格底部3</li> </ul> </div> </div> </body>2.运行效果
