<!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. 一文了解python的 @property

    参考自: https://www.programiz.com/python-programming/property Python为我们提供了一个内置装饰器@property,此方法使得getter和 ...

  2. DES加密详解

    目录 1 根据输入的秘钥得到16个子秘钥 1.1 大致流程 1.2 利用PC-1从K_0中挑出K_1 1.3 利用PC-2从K_1中挑出16个子秘钥 2 利用16个子秘钥对明文进行加密 2.1 大致流 ...

  3. 剑指 Offer 31. 栈的压入、弹出序列 + 入栈顺序和出栈顺序的匹配问题

    剑指 Offer 31. 栈的压入.弹出序列 Offer_31 题目详情: 解析: 这里需要使用一个栈来模仿入栈操作. package com.walegarrett.offer; /** * @Au ...

  4. JDBC概要

    JDBC基础应用 JDBC是Java连接数据库的一套接口,可以让我们方便的在Java中使用数据库.掌握JDBC的使用是Java开发的基本功. 预备工作 导入jar包.根据使用的数据库软件导入相应的ja ...

  5. Keytool 工具使用

    Keytool 管理私钥仓库(keystore)和与之相关的 X.509 证书链(用以验证与私钥对应的公钥),也可以用来管理其他信任实体 keytool 将密钥和证书存储在一个所谓的密钥仓库中,缺省的 ...

  6. Netty源码 reactor 模型

    翻阅源码时,我们会发现netty中很多方法的调用都是通过线程池的方式进行异步的调用, 这种  eventLoop.execute 方式的调用,实际上便是reactor线程.对应项目中使用广泛的NioE ...

  7. C# 应用 - 使用 HttpClient 发起 Http 请求

    1. 需要的库类 \Reference Assemblies\Microsoft\Framework\.NETFramework\v4.7.2\System.Net.Http.dll System.N ...

  8. Cloudam云端,探索高性能计算在药物研究领域的解决方案

    近日,Cloudam云端与国内某知名药企与合作,通过接入Cloudam云端自主研发的云E云超算服务,计算效率提高的数百倍.这也是云算力在生命科学领域的又一次成功应用.Cloudam云端云E云超算服务是 ...

  9. JMeter扩展Java请求实现WebRTC本地音视频推流压测脚本

    WebRTC是Web Real-Time Communication缩写,指网页即时通讯,是一个支持Web浏览器进行实时语音或视频对话的API,实现了基于网页的视频会议,比如声网的Agora Web ...

  10. 网易云信 QUIC 加速服务架构与实践

    导语:网易云信作为音视频服务提供商的领导者,一直致力于提供顶级的音视频通话服务体验,为用户在各种恶劣环境下提供可靠的音视频服务.如何在极端弱网条件下仍然能给用户提供可靠的音视频服务,是网易云信关注的重 ...