利用display屬性寫出表格的布局樣式

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: px/ georgia, simsun, arial;
        }

        h1 {
            margin: px ;
            font-size: px;
            margin-top: em;
        }

        ul {
            margin: ;
            padding: ;
            list-style: none;
        }

        .table {
            display: table;
            border-collapse: collapse;
            border: px solid #ccc; //相當于table标簽
        }

        .table-caption {
            display: table-caption;
            margin: ;
            padding: ;
            font-size: px; //相當于caption标簽
        }

        .table-column-group {
            display: table-column-group; //相當于colgroup标簽
        }

        .table-column {
            display: table-column;
            width: px; //制定對象作為表格列，相當于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:  px;
            border: px 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: px;
            height: px;
            background: #abcdef;
        }
        .haoli{
            width: px;
            height: px;
            background-color: aqua;
        }
           

很多時候項目不讓用表格寫代碼，然後這個就顯示出了他強大的功能。