表头不动，内容滚动的例子(纯css+html)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Table</title>
    <style type="text/css">
        .table{
            width: 100%;
            border-collapse:collapse;
            border-spacing:0;
        }
        .fixedThead{
            display: block;
            width: 100%;
        }
        .scrollTbody{
            display: block;
            height: 262px;
            overflow: auto;
            width: 100%;
        }
        .table td,.table th {
            width: 200px;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            padding: 2px 3px 3px 4px
        }
        .table tr{
            border-left: 1px solid #EB8;
            border-bottom: 1px solid #B74;
        }
        thead.fixedThead tr th:last-child {
            color:#FF0000;
            width: 200px;
        }
        td{
        word-wrap:break-word;
        word-break:break-all;
        }
    </style>
</head>
<body >
    <table class="table">
        <thead class="fixedThead">
            <tr><th>header</th><th>header two</th></tr>
        </thead>
        <tbody class="scrollTbody">
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
            <tr><td>test 1</td><td>test 2</td></tr>
        </tbody>
    </table>
</body>
</html>

时间： 2024-10-24 02:58:03

表头不动，内容滚动的例子(纯css+html)的相关文章

Table实现表头固定内容滚动

<div style="width: 800px;"> <div class="table-head"> <table> <colgroup> <col style="width: 80px;" /> <col /> </colgroup> <thead> <tr><th>序号</th><th>内容<

纯CSS完成tab实现5种不同切换对应内容效果

很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果实例预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <div class="main"> <ul class="tabs"> <li>

在没有引用jquery和其他插件的时候,可以通过纯css的方法实现popout框,效果类似tooltip.这种方法虽然很拙劣,但是未尝也是一种解决办法.我们都知道a标签有几个伪类可以使用,这里要特别注意的是a:link,a:visited,a:hover,a:active这四个伪类的顺序,若不按这样的顺序可能会导致无法实现预期的效果.一般我们只用a:hover这个伪类来实现悬停的效果,而巧妙地利用这个伪类,我们可以实现类似tooltip的效果.但这有一些缺陷,就是popout的内容必须在a标签内

史上最详细纯CSS打造3D文本滚动

昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下. 首先把效果图贴给大家根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/ http://www.w3cplus.com/blog/tags/95.html 那么首先我们就

纯CSS 实现tooltip 内容提示信息效果

Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单. html结构 <a class="css-tooltip" href="http://fatesinger.com/73887" data-tooltip="137 likes with 3.43k reads">WordPress

纯css使用线性渐变实现滚动进度条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

一、纯css实现顶部进度条随滚动条滚动

一.效果图二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享 /*改写chinaobd2.com Begin*/ /*如有定义header, footer 注意设置相应的位置,颜色等*/ body { padding-top: 0px; } @media (max-width: 577px) { body { padding-top: 35px; } } /*应用效果:未应用效果时可直接清除*/ @media (min-width: 768px) { header { background: #0064A

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left