demo地址：http://codepen.io/tianzi77/pen/gpBzjy

元素结构：

   <h1>display构造的table小样例，IE8及下面浏览器不支持本演示样例</h1>

    <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 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>

                <li class="table-cell">工作</li>

                <li class="table-cell">学校</li>

                <li class="table-cell">家庭</li>

            </ul>

        </div>

        <div class="table-footer-group">

            <ul class="table-row">

                <li class="table-cell">holi</li>

                <li class="table-cell">holi</li>

                <li class="table-cell">holi</li>

                <li class="table-cell">holi</li>

                <li class="table-cell">holi</li>

                <li class="table-cell">holi</li>

            </ul>

        </div>

        <div class="table-row-group">

            <ul class="table-row">

                <li class="table-cell">1</li>

                <li class="table-cell">云淡然</li>

                <li class="table-cell">27</li>

                <li class="table-cell">test</li>

                <li class="table-cell">test</li>

                <li class="table-cell">test</li>

            </ul>

            <ul class="table-row">

                <li class="table-cell">2</li>

                <li class="table-cell">刚师傅</li>

                <li class="table-cell">27</li>

                <li class="table-cell">test</li>

                <li class="table-cell">test</li>

                <li class="table-cell">test</li>

            </ul>

            <ul class="table-row">

                <li class="table-cell">3</li>

                <li class="table-cell">草珊瑚</li>

                <li class="table-cell">27</li>

                <li class="table-cell">test</li>

                <li class="table-cell">test</li>

                <li class="table-cell">test</li>

            </ul>

            <ul class="table-row">

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

            </ul>

            <ul class="table-row">

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

            </ul>

            <ul class="table-row">

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

            </ul>

            <ul class="table-row">

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

                <li class="table-cell">hl</li>

            </ul>

        </div>

    </div>

样式：

       body {

            font: 14px/1.5 georgia, simsun, arial;

        }

        h1 {

            margin: 10px 0;

            font-size: 20px;

            margin-top: 3em;

        }

        ul {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .table {

            display: table;

            border-collapse: collapse;

            border: 1px solid #ccc; //相当于table标签

        }

        .table-caption {

            display: table-caption;

            margin: 0;

            padding: 0;

            font-size: 16px; //相当于caption标签

        }

        .table-column-group {

            display: table-column-group; //相当于colgroup标签

        }

        .table-column {

            display: table-column;

            width: 100px; //制定对象作为表格列，相当于col标签

        }

        .table-row-group {

            display: table-row-group; //指定对象作为表格行组。类同于html标签<tbody>

        }

        .table-row {

            display: table-row; //指定对象作为表格行。

类同于html标签<tr>

        }

        .table-row-group .table-row:hover,

        .table-footer-group .table-row:hover {

            background: #abcdef;

        }

        .table-cell {

            display: table-cell;

            padding: 0 5px;

            border: 1px solid #ccc; //指定对象作为表格单元格。类同于html标签<td>

        }

        .table-header-group {

            display: table-header-group;

            background: #eee;

            font-weight: bold; //指定对象作为表格标题组。

类同于html标签<thead>

        }

        .table-footer-group {

            display: table-footer-group; //指定对象作为表格脚注组。

类同于html标签<tfoot>

        }

        .tianzi{

            width: 100px;

            height: 100px;

            background: #abcdef;

        }

        .haoli{

            width: 500px;

            height: 500px;

            background-color: aqua;

        }

非常多时候项目不让用表格写代码。然后这个就显示出了他强大的功能。