博客首页CSS2-3分类

CSS如何实现模拟TABLE?

发布时间:2016-06-17 11:07:52编辑:Mr.Co阅读(1323)

CSS2-3

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

 Table是早些年的产物了,但是至今也有很多人都愿意使用它作为布局,因为它足够的巩固,但是缺点就是渲染速度慢,不够语义化等特点。如果是作为2C端的页面布局我建议还是别用它啦!我现在使用到的Table场景就是在后端程序的gridview数据展现上,因此我也特地写了一个gridview的js插件库,有喜欢的同学可以去关注下!哈哈,扯远啦!咋们还是先说这个Table的事。那么既然不用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>



转载请注明出自:http://www.mrco.cn/article/57563a886248a4cd5b5defe7.html

最新评论(0)

    我要评论

    *
    *
    *
    *
    *
    验证码