长表格

银行流水，表格很长。。。

则需要将表格分为 表头 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 />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        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第五天__长表格的更多相关文章

  1. __x__(37)0909第五天__背景图按钮

    link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...

  2. __x__(38)0909第五天__雪碧图的制作

    1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .

  3. __x__(39)0909第五天__ 表格 table

    表格 表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. html代码: <!doctype html> <html> < ...

  4. __x__(40)0909第五天__表格 table 的 css 样式 美化

    如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...

  5. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  6. __x__(30)0908第五天__导航条的练习 <div>版本

    效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...

  7. __x__(31)0908第五天__导航条的练习 <ul> 版本

    效果图:  html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...

  8. __x__(34)0908第五天__ 定位 position

    position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 ...

  9. __x__(35)0908第五天__ 层级 z-index

    如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index,  则从代码结构上    下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...

随机推荐

  1. java集合框架综述

    一.集合框架图 简化图: 说明:对于以上的框架图有如下几点说明 1.所有集合类都位于java.util包下.Java的集合类主要由两个接口派生而出:Collection和Map,Collection和 ...

  2. 滚动锚定（Scroll Anchoring）- 让视口内容不再因视口上方 DOM 元素的高度变化而产生跳动

    不知道你有没有经历过这样的场景:当你打开一张“多图杀猫”的页面后,正一张图一张图边滚边看,在你刚准备定睛看某一张图的时候,这张图突然被它上面的内容挤到了视口下方,然后你赶紧把滚动条往下拉,试图追赶这张 ...

  3. 可变与不可变类型数据，列表的copy方法

    我们先来了解一下可变与不可变类型的数据 (1)可变类型:列表,字典(内存中的数据允许被修改) 不可变类型:数字,字符串,元组(内存中的数据不允许被修改) 接着我们通过一个实例来看一看可变与不可变类型数 ...

  4. docker创建Redis集群

    开始工作: yum install wegt ##安装下载工具 yum install net-tools ##安装网络工具 yum install tree ##安装tree命令(方便查看集群配置文 ...

  5. 10. linux输入子系统/input 设备【转】

    转自:https://www.cnblogs.com/crmn/articles/6696819.html 按键事件信息之上报绝对事件信息之上报相对事件信息之上报功能键驱动编写多点触控事件的上报 只产 ...

  6. linux 解决Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?

    第一种: sudo vim /etc/resolv.conf 添加nameserver 8.8.8.8 第二种: /etc/apt/sources.list 的内容换成 deb http://old- ...

  7. javascript中字符串的方法

    字符串的方法 charAt();返回字符串指定索引的字符: concat();连接两个或多个字符串: indexOf();返回字符串中检索指定字符第一次出现的位置: lastIndexOf();返回字 ...

  8. Java Spring Boot VS .NetCore （四）数据库操作 Spring Data JPA vs EFCore

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  9. SQL反模式学习笔记9 元数据分裂

    目标:支持可扩展性.优化数据库的结构来提升查询的性能以及支持表的平滑扩展. 反模式:克隆表与克隆列 1.将一张很长的表拆分成多张较小的表,使用表中某一个特定的数据字段来给这些拆分出来的表命名. 2.将 ...

  10. Oracle做insert或者update时未提交事务导致表锁定解决办法

    //查看被锁定表有几个 select object_name,machine,s.sid,s.serial# from v$locked_object l,dba_objects o ,v$sessi ...