__x__(41)0909第五天__长表格
长表格
银行流水，表格很长。。。
则需要将表格分为 表头 thead ，主体数据 tbody ， 表格底部 tfoot
三个标签无顺序要求，易于维护：thead → tfoot → tbody
如果没写 tbody ，浏览器会自添加 tbody，并将所有的 tr 移入 tbody
好处：
可以分别设置样式。
打印时，利用分类处理多页表头，表尾的效果。
无顺序要求，已维护。
效果图：
css代码：
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #3e4e54;
}
table{
margin: 0px auto;
width: 40%;
/* 单元格之间的距离。*/
border-spacing: 0px;
/* 表格的边框合并。设置以后 border-spacing 自动失效*/
border-collapse: collapse;
}
#mytb th,td{
border: 1px red solid;
}
/* 隔行变色 IE8 及以下不支持 :nth-child() */
tr:nth-child(even){
background-color: #666;
}
/* 悬浮变色 IE6及以下不支持 a 以外的元素使用 :hover */
tr:hover{
background-color: #bfc;
}
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title> <link rel="stylesheet" type="text/css" href="css/longtable.css" />
</head> <body>
Hello Web!` <br />
table 是<b>块元素</b>，独占一行 <table id="mytb">
<thead>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>性别</th>
</thead> <tfoot>
<tr>
<td></td>
<td>共</td>
<td>12</td>
<td>人</td>
</tr>
</tfoot> <tbody>
<tr>
<td>刘备</td>
<td>35</td>
<td>男</td>
<td>男</td>
</tr> <tr>
<td>关羽</td>
<td>33</td>
<td>男</td>
<td>男</td>
</tr> <tr>
<td>张飞</td>
<td>30</td>
<td>男</td>
<td>男</td>
</tr> <tr>
<td>唐僧</td>
<td>27</td>
<td>男</td>
<td>男</td>
</tr> <tr>
<td>孙悟空</td>
<td>633</td>
<td>男</td>
<td>男</td>
</tr> <tr>
<td>猪八戒</td>
<td>830</td>
<td>男</td>
<td>男</td>
</tr> <tr>
<td>沙悟净</td>
<td>735</td>
<td>男</td>
<td>男</td>
</tr> <tr>
<td>白龙马</td>
<td>533</td>
<td>男</td>
<td>男</td>
</tr> <tr>
<td>白骨精</td>
<td>130</td>
<td>女</td>
<td>女</td>
</tr> <tr>
<td>蜘蛛精</td>
<td>135</td>
<td>女</td>
<td>女</td>
</tr> <tr>
<td>金角大王</td>
<td>430</td>
<td>男</td>
<td>男</td>
</tr> <tr>
<td>东海龙王</td>
<td>3000</td>
<td>男</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
__x__(41)0909第五天__长表格的更多相关文章
- __x__(37)0909第五天__背景图按钮
link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...
- __x__(38)0909第五天__雪碧图的制作
1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .
- __x__(39)0909第五天__ 表格 table
表格 表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. html代码: <!doctype html> <html> < ...
- __x__(40)0909第五天__表格 table 的 css 样式 美化
如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...
- __x__(29)0908第五天__高度塌陷 问题
高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...
- __x__(30)0908第五天__导航条的练习 <div>版本
效果图: html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...
- __x__(31)0908第五天__导航条的练习 <ul> 版本
效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...
- __x__(34)0908第五天__ 定位 position
position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static 没有定位,原始出现在正常的文档流中 可选值: static : 默认值,元素没有开启定位 ...
- __x__(35)0908第五天__ 层级 z-index
如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index, 则从代码结构上 下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...
随机推荐
- SpringCloud笔记四：Ribbon
目录 什么是Ribbon? Ribbon的配置 Maven引入 开启注解 Ribbon负载均衡 新建provider8002和8003 Ribbon核心组件IRule Ribbon自定义 什么是Rib ...
- SNMP学习——v3 VACM
目录: ☆ SNMPv3视图访问控制模型 ☆ SNMPv3报文格式 ☆ VACM参数 ☆ Context Table ☆ Security To Group Table ...
- Angular: 执行ng lint后如何快速修改错误
当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...
- DirectX11 With Windows SDK--06 DirectXMath数学库
前言 xnamath.h原本是位于DirectX SDK的一个数学库,但是现在Windows SDK包含的数学库已经抛弃掉原来的xnamath.h,并演变成了现在的DirectXMath.h.其实本质 ...
- react实战项目开发(1) 搭建react开发环境初始化项目（Create-react-app）
前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令 ...
- python 排序之sort
#coding:utf-8 #求列表的第二大值 list_test =[6,2,4,6,1,2,3,4,5] list_test.sort() print list_test[-2] "&q ...
- APPLE-SA-2019-3-25-1 iOS 12.2
APPLE-SA-2019-3-25-1 iOS 12.2 iOS 12.2 is now available and addresses the following: CFStringAvailab ...
- 树链剖分详解（洛谷模板 P3384）
洛谷·[模板]树链剖分 写在前面 首先,在学树链剖分之前最好先把 LCA.树形DP.DFS序 这三个知识点学了 emm还有必备的 链式前向星.线段树 也要先学了. 如果这三个知识点没掌握好的话,树链剖 ...
- django中的反向解析
1,定义: 随着功能的增加会出现更多的视图,可能之前配置的正则表达式不够准确,于是就要修改正则表达式,但是正则表达式一旦修改了,之前所有对应的超链接都要修改,真是一件麻烦的事情,而且可能还会漏掉一些超 ...
- Junit的基础学习
一个强大的单元测试框架: 一.组成部分: 1.注解: (1)@Test 注解: 放在测试方法上,表示这是用于测试其他方法的一个测试单元 @Test public void testSum1(){ Sy ...