<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Book List</title>

<style type="text/css">

.bigdiv{overflow:hidden;width:100%;height:100%;}

table {

    background-color: #FFF;

    border: none;

    color: #565;

    font: 12px arial;

	overflow-y: scroll;overflow-x: hidden;

	width:110%;

}

table caption {

    font-size: 24px;

    border-bottom: 2px solid #B3DE94;

    border-top: 2px solid #B3DE94;

	width:79%;

}

table, td, th {

    margin: 0;

    padding: 0;

    vertical-align: middle;

    text-align:left;

}

tbody{

	display:block;

	height:295px;

	overflow-y:scroll;

}

tbody tr {

	display:table;

	width:80%;

	table-layout:fixed;

}

table thead {

	display:table;

	width:79.15%;

	table-layout:fixed;

}

table thead th{ color:#FFFFFF;}

tbody td, tbody th {

    background-color: #DFC;

    border-bottom: 2px solid #B3DE94;

    border-top: 3px solid #FFFFFF;

    padding: 9px;

}

tfoot td, tfoot th {

    font-weight: bold;

    padding: 4px 8px 6px 9px;

    text-align:center;

}

thead th {

    font-size: 14px;

    font-weight: bold;

    line-height: 24px;

    padding: 0 8px 2px;

    text-align:center;

}

tbody tr.odd th,tbody tr.odd td { /*odd就是偶数行*/

    background-color: #CEA;

    border-bottom: 2px solid #67BD2A;

	text-align:center;

}

td+td+td, /*第三个td以及之后的td元素*/

col.price{ /*类样式*/

    text-align:center;

}

tbody tr:hover td, tbody tr:hover th { /*tr也有hover样式*/

    background-color: #8b7;

    color:#fff;

}

</style>

</head>

<body>

     <div class="bigdiv">

        <table summary="book list">

            <caption>Book List</caption> <!-- caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 -->

            <col></col><col></col><col></col><col class="price" align="right"></col>

            <thead>

                <tr>

                    <th bgcolor="#009999">Title</th>

                    <th bgcolor="#00CC99">ID</th>

                    <th bgcolor="#660066">Country</th>

                    <th bgcolor="#CCCC33">Price</th>

                    <th bgcolor="#FF0066">Download</th>

                </tr>

            </thead>

            <tbody>

                <tr class="odd">

                    <td >Tom</td>

                    <td>1213456</td>

                    <td>Germany</td>

                    <td>$3.12</td>

                    <td>Download</td>

                </tr>

                <tr class="odd">

                    <td >Chance</td>

                    <td>1213457</td>

                    <td>Germany</td>

                    <td>$123.34</td>

                    <td>Download</td>

                </tr>

                <tr class="odd">

                    <td >John</td>

                    <td>1213458</td>

                    <td>Germany</td>

                    <td>$34.37</td>

                    <td>Download</td>

                </tr>

                <tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

				<tr class="odd">

                    <td>oKathleen</td>

                    <td>1213459</td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

                </tbody>

</table>

</div>

</body>

</html>

　　

HTML / CSS技巧 – 可滚动的 tbody（漂亮表格）的更多相关文章

  1. 20个很有用的CSS技巧

    导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...

  2. 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  3. （转） 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  4. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  5. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  6. 10个网页设计师必备的CSS技巧（转）

    英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...

  7. 100个实用的CSS技巧，以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

  8. 你很熟悉CSS，却没掌握这些CSS技巧

    转载来自 http://www.html5cn.org/article-9294-1.html 做前端开发的人都很熟悉CSS,一个漂亮的网页由HTML标签和控制这些标签布局的CSS组成,因此CSS在开 ...

  9. 【WEB基础】HTML & CSS 基础入门（7）表格

    表格的基本结构 表格是网页上最常见的元素,它除了可以用来展示数据,还常常被用来排版.虽然现在提倡使用DIV+CSS完成页面布局,但表格框架简单明了,对于繁杂的数据,一个简洁的表格能让其展现的极有条理. ...

随机推荐

  1. Vue.js 多选列表（Multi-Select）组件

    搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...

  2. POJ-2502(Dijikstra应用+最短路)

    Subway POJ-2502 这里除了直接相连的地铁站,其他图上所有的点都要连线,这里是走路的速度. 记住最后的结果需要四舍五入,否则出错. #include<iostream> #in ...

  3. Spring的IOC常用注解(含源码)

    一.容器中注入组件 1,包扫描 + 组件标注注解 源码:Demo01_ComponentScan a)组件标注 @Controller @Service @Repository @Component ...

  4. PHP中一些常用的安全类函数

      (1) htmlspecialchars() 表单验证(验证表单中的数据是否为空以及提交的数据是否合法) htmlspecialchars() //该函数将预定义的字符转化为html实体,预定义的 ...

  5. FreeBSD安装xorg + xfce 4

    FreeBSD安装xorg,以及xfce 安装xorg 可选包 -xorg 完整xorg环境包 -xorg-minimal xorg最小化包 ports安装 cd /usr/ports/x11/xor ...

  6. BIMFACE二次开发SDK 开源C#版

    [ BIMFace.SDK.CSharp ] 是基于微软.NET 技术封装的用于 BIMFACE 二次开发的通用类库.其中封装了BIMFace服务端API,包含基础API.文件上传API.文件转换AP ...

  7. 攻防世界 reverse 进阶 15-Reversing-x64Elf-100

    15.Reversing-x64Elf-100 这题非常简单, 1 signed __int64 __fastcall sub_4006FD(__int64 a1) 2 { 3 signed int ...

  8. 搞懂 ZooKeeper 集群的数据同步

    本文作者:HelloGitHub-老荀 Hi,这里是 HelloGitHub 推出的 HelloZooKeeper 系列,免费开源.有趣.入门级的 ZooKeeper 教程,面向有编程基础的新手. 项 ...

  9. 云原生 API 网关，gRPC-Gateway V2 初探

    gRPC-Gateway 简介 我们都知道 gRPC 并不是万能的工具. 在某些情况下,我们仍然想提供传统的 HTTP/JSON API.原因可能从保持向后兼容性到支持编程语言或 gRPC 无法很好地 ...

  10. 使用KeepAlived来实现高可用的DR模型

    环境 VMware 16 CentOS8 相关软件 keepalived ipvsadm httpd 准备工作 准备四个节点,如上图,Node01 ~ Node04, 本文默认你会在VMWare上安装 ...