<!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. go mod包管理 加代理下载

    原始go.mod文件 module xxx go 1.14 报错 i/o timeout go mod init workorder go mod init: go.mod already exist ...

  2. 剑指 Offer 35. 复杂链表的复制

    剑指 Offer 35. 复杂链表的复制 Offer_35 题目详情 方法一 可以使用一个HashMap来存储旧结点和新结点的映射. 这种方法需要遍历链表两遍,因为需要首先知道映射关系才能求出next ...

  3. Ext.Net一般处理程序上传文件

    引言 最近公司项目全部转向前端化,故所有aspx页面业务逻辑尽可能的转到用户控件前台页面完成.以方便每次发布项目时只是替换前端页面不会影响客户体验. 既然转到前台逻辑,那么必须走后台的业务也就单独封装 ...

  4. slickgrid ( nsunleo-slickgrid ) 5 增加子件

    slickgrid ( nsunleo-slickgrid ) 5 增加子件 上次把单元格切换的问题解决了,这次要最做的事情就是给slickgrid的treegird增加子件,我们先选中某一条记录,然 ...

  5. P4285 [SHOI2008]汉诺塔 题解 （乱搞）

    题目链接 P4285 [SHOI2008]汉诺塔 解题思路 提供一种打表新思路 先来证明一个其他题解都没有证明的结论:\(ans[i]\)是可由\(ans[i-1]\)线性递推的. (\(ans[i] ...

  6. 文件锁fcntl

    一.python中的文件锁 我们在写python应用的时候,当涉及到多个进程向同一个文件write(或者read)的情况,如果几个进程同时都对这个文件进行写操作,那么文件的内容就会变得非常混乱,这个时 ...

  7. 【python+selenium的web自动化】- 针对上传操作的实现方案

    如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html 关于上传操作 ​ 上传有两 ...

  8. Vue ElementUI表格table中使用select下拉框组件时获取改变之前的值

    目前项目中有一个场景,就是表格中显示下拉框,并且下拉框的值可以更改,更改后提交后台更新.因为这个操作比较重要,所以切换时会有一个提示框,提示用户是否修改,是则走提交逻辑,否则直接返回,什么也不做. 之 ...

  9. SQL注入与参数化查询

    SQL注入的本质 SQL注入的实质就是通过SQL拼接字符串追加命令,导致SQL的语义发生了变化.为什么发生了改变呢? 因为没有重用以前的执行计划,而是对注入后的SQL语句重新编译,然后重新执行了语法解 ...

  10. Forms身份验证 知识总结

    最简单的Forms验证实现方法:FormsAuthentication.SetAuthCookie()方法,传递一个登录名即可FormsAuthentication.SignOut()方法退出Form ...