<!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. 使用Spark加载数据到SQL Server列存储表

    原文地址https://devblogs.microsoft.com/azure-sql/partitioning-on-spark-fast-loading-clustered-columnstor ...

  2. 剑指 Offer 53 - I. 在排序数组中查找数字 I + 二分法

    剑指 Offer 53 - I. 在排序数组中查找数字 I Offer_53_1 题目描述 方法一:使用HashMap package com.walegarrett.offer; /** * @Au ...

  3. pytorch（17）学习率调整

    学习率调整 class _LRScheduler 主要属性 optimizer:关联的优化器 last_epoch:记录epoch数 bash_lrs:记录初始学习率 class _LRSchedul ...

  4. Java程序员必备后台前端框架--Layui【从入门到实战】（一）

    layui入门使用及图标的使用 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] [编程工具:IDEA] 下载Layui与文件分析 下载直接去官网下载即可 文件分析 下载完成后,解压会 ...

  5. salesforce零基础学习（一百零一）如何了解你的代码得运行上下文

    本篇参考:https://developer.salesforce.com/docs/atlas.en-us.228.0.apexcode.meta/apexcode/apex_enum_System ...

  6. Java流程控制：三种基本结构

    顺序结构: Java的基本结构就是顺序结构,除非特别指明,否则就按照顺序一句一句执行顺序结构是最简单的算法结构语句与语句之间,框与框之间是按从上到下的顺序进行的,它是由若干个依次执行的处理步骤组成的, ...

  7. BIMFACE二次开发【C#系列】

    本系列文章主要介绍使用 C# .ASP.NET(MVC)技术对 BIMFACE 平台进行二次开发,以满足本公司针对建筑行业施工图审查系统的业务需求,例如图纸模型(PDF 文件.二维 CAD 模型.三维 ...

  8. Git详解和Github的使用

    Git和Github的概念: Git是分布式版本管理系统,简单说就是一个软件,用于记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的软件. Github是一个为用户提供Git服务的网站,简单说 ...

  9. Stone Game, Why are you always there? HDU - 2999

    题目链接:https://vjudge.net/problem/HDU-2999 题意:有N堆石头,两个人交替取,每次只能取连续的k个石子,最后没有石子取得人输. 思路:如果我们每次取靠边的k个,那么 ...

  10. P1177【模板】快速排序(JAVA语言)

    import java.util.Scanner; import java.util.ArrayList; import java.util.Collections; import java.util ...