div + css 实现表格

一、

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>

猜你喜欢