利用display属性写出表格的布局样式

Posted 2020-09-29 gavanwanggw

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

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