div+css 制作表格
<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> <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-footer-group"> <ul class="table-row"> <li class="table-cell">footer</li> <li class="table-cell">footer</li> <li class="table-cell">footer</li> </ul> </div> <div class="table-row-group"> <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;}
转载于:https://www.cnblogs.com/wujiaolong/p/7305591.html
div+css 制作表格相关推荐
- div做表格 html5,div+css制作表格
本章给大家介绍如何用div+css制作表格,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. html: 花名册: 序号 姓名 年龄 footer footer footer 1 Jo ...
- div css 制作表格
<div class="table"> <h2 class="table-caption">花名册:</h2> <di ...
- html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
- html把div分成两栏,div+css制作上中下,中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...
- 纯div+css制作的弹出菜单
纯div+css制作的弹出菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- HTML+CSS初学者练习项目4:利用DIV+CSS制作《互联世纪网》
适合初学者练习的HTML项目:利用DIV+CSS制作制作一个<互联世纪网>网页. 需要掌握内容: HTML+CSS第八课:使用CSS布局网页--网页中块级元素与行内元素.盒子模型的理解 H ...
- html如何做滑动门效果,div+css制作简单滑动门效果
现在流行的网站设计中,水平导航菜单占据了大壁江山.的确,无论是门户网站还是企事业单位网站,都大量的采用水平的导航菜单设计.而水平导航菜单中,又有绝大多数网站采用"滑动门"设计. 首 ...
- 用DIV+CSS制作四川成都美食网页介绍(网页设计期末课程设计)
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 用DIV+CSS制作四川成都美食网页介绍
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
最新文章
- System Center 2012 R2 CM系列之安装Configuration Manager
- gunicorn多进程不死_WEB,gunicorn - 无论是多进程、多线程、协程模式,同一个浏览器窗口多个标签页访问同一个url,看上去不会并发的问题...
- photoshop cs3反应慢的原因
- 大富翁已成过去-我的一些感想
- upload-labs_pass20-move_uploaded_file函数特性
- Swift 设置字体
- [2019 牛客CSP-S提高组赛前集训营4题解] 复读数组(数论)+ 路径计数机(数上DP)+ 排列计数机(线段树+二项式定理)
- js 正则 正确的书写逻辑 中 德文小数点区别
- oracle常用的知识点
- Powershell 语法总结
- Atitit 三种并发编程模型 艾龙 attilax总结 1. 并发系统可以使用不同的并发模型去实现。	1 2. 并行工作者 并行工作者模型。进来的任务分配给不同的工作者 银行模式	2 2.1.
- 网络编程练手小项目---英英词典
- 标志寄存器FLAGS----小总结
- CTF逆向-[GWCTF 2019]babyvm-WP-虚机模拟流程反向编码和z3约束求解器解方程工具的使用
- STM32F103C8T6多通道adc采集(3通道)
- Janus videoroom 视频录制
- WPF:MouseDown、MouseUP事件,鼠标按下不起作用
- Bioinformatics生物信息专业相关网址
- c语言double ave,[编程入门]结构体之成绩统计2-题解(C语言代码)
- 在线文档预览解决方案-Office Web Apps在Windows Server 2008 R2部署教程