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

__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 ...

随机推荐

C#获取根目录的方法总结
1.控制台应用程序 static void Main(string[] args) { //1.Environment.CurrentDirectory Console.WriteLine(Envir ...
springBoot总结
springBoot总结: ssm基本的依赖: <dependencies>  <!--<depend ...
第十二节：MVC中的一些特殊优化
一. 删除WebForm视图引擎在MVC框架中检索视图的顺序为:当前控制器下对应的文件夹的aspx文件→share文件夹aspx文件→当前控制器下对应文件夹的cshtml文件→share文件夹的cs ...
Word中页眉、页码设置
本篇博文简单介绍一下文档中页眉.页码设置的问题一个项目中,封面一般不需要页眉,要关闭首页的页眉,可以在"页眉和页脚工具->选项->首页不同"可以如下设置: 图 1关闭 ...
FineUIMvc 常见问题及解决办法
Ø 简介 FineUIMvc 是基于 jQuery 的专业 ASP.NET MVC/Core 控件库,本文主要介绍 FineUIMvc 的常见问题及解决办法. 1. View 中无法调用 Htm ...
Jsp1
jsp代码中包含两类:jsp元素和template data. template模板 data:jsp引擎不处理的部分,就是<%....%>之外的部分,直接给浏览器显示. <%! % ...
Contest2156 - 2019-3-7 高一noip基础知识点测试2 题解版
传送门预计得分:100+70+100+50=320 实际得分100+63+77+30=270 Ctrl_C+Ctrl_V时不要粘贴翻译的,直接粘原文, In a single line of the ...
ubuntu16.04降级内核版本至3.13.0-85
1.前言采用ubuntu16.04在编译实验课程的实例代码simplefs 时,发现编译时报如下错误: 因此需要将ubuntu16.04的内核版本降级为 3.13.0-85-generic 2.修改 ...
k64 datasheet学习笔记39---Programmable Delay Block (PDB)
0.前言 TODO 1.特性 TODO 4. 功能描述 4.1 PDB pre-trigger and trigger outputs PDB包含一个计数器,它的输出可以跟几个不同的数字值比较.如果P ...
Flask开发微电影网站(九)
1.后台管理之电影管理 1.1 电影管理之所有电影收藏列表 1.1.1 电影管理之电影收藏列表视图函数在admin目录下的views.py文件中定义电影收藏列表视图函数电影收藏列表视图函数需要被登 ...

__x__(41)0909第五天__长表格

__x__(41)0909第五天__长表格的更多相关文章

随机推荐

热门专题

x(41)0909第五天__长表格

x(41)0909第五天__长表格的更多相关文章