长表格

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

则需要将表格分为 表头 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. DirectX11 With Windows SDK--07 添加光照与常用几何模型

    前言 对于3D游戏来说,合理的光照可以让游戏显得更加真实.接下来会介绍光照的各种分量,以及常见的光照模型.除此之外,该项目还用到了多个常量缓冲区,因此还会提及HLSL的常量缓冲区打包规则以及如何设置多 ...

  2. [物理学与PDEs]第3章习题3电磁场的矢势在 Lorentz 规范下满足的方程

    设 $\phi$ 及 ${\bf A}$ 分别为电磁场的标势及矢势 (见第一章 $\S$ 6). 试证明: 若 $\phi$ 及 ${\bf A}$ 满足条件 $$\bex \phi+\cfrac{1 ...

  3. [物理学与PDEs]第2章习题13 将 $p$ - 方程组化为守恒律形式的一阶拟线性对称双曲组

    试引进新的未知函数, 将 $p$ - 方程组 $$\beex \bea \cfrac{\p \tau}{\p t}-\cfrac{\p u}{\p x}&=0,\\ \cfrac{\p u}{ ...

  4. Python3：字符串的大小写和镜像字符串（swapcase()函数，chr()，ord()，translate()函数）

    题目: 请编程实现字符串的转换:1. 将"adsdsfdndsdsdfsfdsdASDSDEDSFE18754"字符串大写变小写,小写变大写:2. 并且将字符串变为镜像字符串,例如 ...

  5. 让iframe自适应高度-真正解决

    需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...

  6. 微信app支付的坑

    app支付商户申请,需注册并认证开放平台账号后电脑端登录开放平台官网:open.weixin.qq.com,[管理中心]->[移动应用],选择需要申请支付的应用,点击[查看]->[微信支付 ...

  7. 【转】使用keepalived设置虚拟IP示例

    准备 准备两台机器,IP地址信息如下: host1: 192.168.56.103 host2: 192.168.56.104 为了测试需要,分别在两台机器上安装apache并启动httpd服务,使下 ...

  8. 【原创】大叔经验分享（7）创建hive表时格式如何选择

    常用格式 textfile 需要定义分隔符,占用空间大,读写效率最低,非常容易发生冲突(分隔符)的一种格式,基本上只有需要导入数据的时候才会使用,比如导入csv文件: ROW FORMAT DELIM ...

  9. Python——plot可视化数据，作业8（python programming）

    subject1k和subject1v的形状相同 # -*- coding: utf-8 -*- import scipy.io as sio raw_K = sio.loadmat('Subject ...

  10. Python--map()函数

    map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于list [1, 2 ...