CSS如何实现模拟TABLE？

 早上碰到一位童鞋问到一个关于模拟table实现问题，正好这里写篇文章做个记录吧，希望能帮助到需要的童鞋们！如有不对的地方欢迎大家拍砖！

 Table是早些年的产物了，但是至今也有很多人都愿意使用它作为布局，因为它足够的巩固，但是缺点就是渲染速度慢，不够语义化等特点。如果是作为2C端的页面布局我建议还是别用它啦！我现在使用到的Table场景就是在后端程序的gridview数据展现上，因此我也特地写了一个gridview的js插件库，有喜欢的同学可以去关注下！哈哈，扯远啦！咋们还是先说这个Table的事。那么既然不用Table作为布局，那么假如产品设计成Table的样式也是不可避免的，那么我们就必须要去做模拟Table啦！

 现在这里分享下如何实现模拟TABLE。

最终效果：

CSS代码部分：

.table{ border:1px solid #ddd; }
.dl{ display: table; width: 100%; border-bottom:1px solid #ddd; padding:0; margin: 0; }
.dl:nth-child(odd){ background:#f2f2f2; }
.dl dd,.dl dt{ display: table-cell; height:100%; width: 100px; list-style:none; padding:0; margin:0; border-left:1px solid #ddd; vertical-align: top; padding:10px; }
.dl dd:first-child,.dl dt:first-child{ border:none; }
.dl dt{ background:#333; color:#fff; }
.dl:last-child{ border:none; }

HTML代码部分：

<div class="table">
        <dl class="dl">
            <dt>编号</dt>
            <dt>标题</dt>
            <dt>作者</dt>
            <dt>日期</dt>
        </dl>
        <dl class="dl">
            <dd>1</dd>
            <dd>hello表格</dd>
            <dd>mr.co</dd>
            <dd>2016-06-17 10:12:12</dd>
        </dl>
        <dl class="dl">
            <dd>2</dd>
            <dd>hello表格</dd>
            <dd>mr.co</dd>
            <dd>2016-06-17 10:12:12</dd>
        </dl>
        <dl class="dl">
            <dd>3</dd>
            <dd>hello表格</dd>
            <dd>mr.co</dd>
            <dd>2016-06-17 10:12:12</dd>
        </dl>
        <dl class="dl">
            <dd>4</dd>
            <dd>hello表格</dd>
            <dd>mr.co</dd>
            <dd>2016-06-17 10:12:12</dd>
        </dl>
        <dl class="dl">
            <dd>5</dd>
            <dd>hello表格</dd>
            <dd>mr.co</dd>
            <dd>2016-06-17 10:12:12</dd>
        </dl>
    </div>