站长之站 站长之站QQ群:16356000 100345456 16263640 130690866
还没有任何记录...
当前位置:站长之站 > 网页设计 > 正文 > div+css制作表格

div+css制作表格

来源:网络作者:网络日期:2017/12/1 23:51:00收藏
本文链接:div+css制作表格http://www.cncncc.com/ArtSJ/Show.Asp?id=4234

html DIV部分

<div class="table">    
        <div class="table-header-group">  
            <ul class="table-row">  
                <li class="table-cell">序号</li> 
                <li class="table-cell">姓名</li> 
                <li class="table-cell">年龄</li> 
            </ul>  
        </div>   
        <div class="table-row-row">  
            <ul class="table-row">  
                <li class="table-cell">1</li>  
                <li class="table-cell">John</li> 
                <li class="table-cell">19</li>  
            </ul>  
            <ul class="table-row">  
                <li class="table-cell">2</li>  
                <li class="table-cell">Mark</li> 
                <li class="table-cell">21</li>  
            </ul>  
            <ul class="table-row">  
                <li class="table-cell">3</li>  
                <li class="table-cell">Kate</li> 
                <li class="table-cell">26</li>  
            </ul>  
        </div>  
    </div>

CSS部分

ul{margin:0;padding:0;list-style:none;}  
.table{display:table;border-collapse:collapse;border:1px solid #ccc;}
.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;} 
.table-column-group{display:table-column-group;}  
.table-column{display:table-column;width:100px;}  
.table-row-group{display:table-row-group;}  
.table-row{display:table-row;}  
.table-row-group .table-row:hover,.table-footer-group 
.table-row:hover{background:#f6f6f6;}  
.table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}.table-header-group{display:table-header-group;background:#eee;font-weight:bold;}  
.table-footer-group{display:table-footer-group;}



作者:站长之站 收集整理,任何媒体转发须保留作者个人微信和来源,不尊重作者劳动的行为将受到举报。
本文链接:div+css制作表格http://www.cncncc.com/ArtSJ/Show.Asp?id=4234

【div+css制作表格】由站长之站收集整理,您可以自由传播,请主动带上本文链接

觉得有用就多来支持一下,没有能帮到您,站长之站也只能表示遗憾,希望有一天能帮到您。

(责任编辑:站长之站)

上一篇:帮助设计师和开发者的9种实用CSS技巧

下一篇:没有数据

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
站长之站 · CNCMS
站长之站 测试频道
业界动态
业界动态 门户网站 聚焦人物 电子商务 站长新闻 观察评论
编程开发
ASP教程 .NET教程 JSP教程 PHP教程 Xml/Xslt Shtml教程 CGI专区 JavaScrip 其他编程
服务器类
Web服务器 Ftp服务器 Mail服务器 Dns服务器 Linux服务器 Win服务器 安全防护 服务器其他
建站指南
主机域名 建站入门 建站经验 网站推广 网站优化 网站策划 网络赚钱 网络创业 SEO 专区
网页设计
Html教程 设计心得 动态网页 JS/Ajax Div/Css CSS教程 设计其它
软件教程
Photoshop Fireworks FLASH Dreamweaver Frontpage 其他教程
数据库类
MSAccess MS_SQL My_SQL VFP PowerBuilder Oracle 其它数据
全站导航
业界动态编程开发服务器类建站指南网页设计软件教程数据库类
关于我们/版权
版权所有:
Copyright © 2008 - 2019 站长之站 www.cncncc.com
PowerBy:CNCMS(5.1.20)

苏ICP备16002106号-1