<!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. AOP面试造火箭始末

    本文已整理致我的github地址,欢迎大家 star 支持一下 这是一个困扰我司由来已久的难题,Dubbo 了解过吧,对外提供的服务可能有多个方法,一般我们为了不给调用方埋坑,会在每个方法里把所有异常 ...

  2. 小程序基于Token登录 示意图

  3. Mybatis系列全解（六）：Mybatis最硬核的API你知道几个？

    封面:洛小汐 作者:潘潘 2020 年的大疫情,把世界撕成几片. 时至今日,依旧人心惶惶. 很庆幸,身处这安稳国, 兼得一份安稳工. · 东家常讲的一个词:深秋心态 . 大势时,不跟风.起哄, 萧条时 ...

  4. 在 .NET Core 中应用六边形架构

    在本文中,您会看到一个Web API应用的模板,在.NET Core 中应用了六边形架构,并且里面包含了一些基础功能. 介绍 这是一个模板项目,里面集成了一些必备的基础功能,当我们需要开发一个新项目时 ...

  5. Linux速通05 文件处理与编辑

    使用 cat 命令进行文件的纵向合并 # 例:使用 cat 命令将 baby.age.baby.weight.baby.sex 这三个文件纵向合并为 baby文件 * cat baby.age bab ...

  6. 【python+selenium的web自动化】- 控制浏览器的常用操作

    如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html 前言 ​ 本文主要介绍se ...

  7. apicloud打包的ios证书的获取方法

    apicloud云编译的时候,需要测试证书或者正式证书进行编译. 那么这个证书是怎么来的呢?通过什么渠道可以获取呢? 这里我介绍下使用香蕉云编这个在线工具来生成: 1.登录香蕉云编,生成证书的csr文 ...

  8. PHP配置 3. 配置open_basedir

    open_basedir将网站限定在指定的目录,做目录的隔离 先在php.ini中设置open_basedir: # vim /usr/local/php/etc/php.ini //搜索open_b ...

  9. Elasticsearch 单字符串多字段查询

    前言 有些时候,我们搜索的时候,只会提供一个输入框,但是会查询相关的多个字段,典型的如Google搜索,我们该如何用 Elasticsearch 如何实现呢? 实例 从单字符串查询的实例说起 创建测试 ...

  10. CF524F And Yet Another Bracket Sequence 题解

    题目链接 算法:后缀数组+ST表+贪心   各路题解都没怎么看懂,只会常数巨大的后缀数组+ST表,最大点用时 \(4s\), 刚好可以过... 确定合法序列长度   首先一个括号序列是合法的必须满足以 ...