__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 ...
随机推荐
- 迅为IMX6开发板真实产品案例分享-专为研发用芯选择
迅为IMX6开发板: Android4.4系统 Linux + Qt5.7系统 Ubuntu12.04系统 部分真实案例:HMI:3D打印机:医疗设备:工控机:触控一体机:车载终端 核心板兼容:IMX ...
- Pytorch中的自动求导函数backward()所需参数含义
摘要:一个神经网络有N个样本,经过这个网络把N个样本分为M类,那么此时backward参数的维度应该是[N X M] 正常来说backward()函数是要传入参数的,一直没弄明白backward需要传 ...
- win10设置vscode的终端为管理员权限
右击vscode 点击属性选择兼容性,勾选 “以管理员身份运行此程序” 确定即可!
- CodeBlocks(17.12) 代码调试基础方法&快捷方式
转载:CodeBlocks(17.12) 代码调试基础方法&快捷方式: https://www.cnblogs.com/DCD112358/p/8998053.html
- linux 下nginx 集群CAS单点登录实现
1.单点登录服务器CAS应用配置于tomcat下. 1)key生成: keytool -genkey -alias mycas -keyalg RSA -keysize 2048 -keystore ...
- MySql的事务控制（TCL语言）
⒈事务 一个或一组sql语句组成一个执行单元,这个执行单元要么全部执行,要么全部不执行. ⒉事务的特性(ACID) 1.原子性(Atomicity):一个事务不可再分割,要么都执行要么都不执行. 2. ...
- Django组件-用户认证
用户认证 一.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenti ...
- python爬虫解决编码问题
参考 https://blog.csdn.net/qq_38008452/article/details/80423436 问题 解决方法 加上encoding='utf-8'
- Beta冲刺（3/7）
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(3/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 ppt模板 接下来的计划 做好机动. ...
- Gradle part1 HelloWorld
(https://spring.io/guides/gs/gradle/#scratch) ----gradle helloworld----- 1.下载后安装 Unzip the file to y ...