<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>固定表格表头</title>

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<style type="text/css">

div {

    overflow-y: scroll;

    overflow-x: hidden;

    height: 100px;

    margin-top: 5px;

    margin-left: 12px;

    padding-top: -2px;

    padding-bottom: 5px;

    border: 3px solid #009933;

}

table {

    width: 100%;

    border-color: #d2f1ac;

    border-collapse: collapse;

    border-top: 0px solid #ffffff;

}

.fixedtd {

    position: relative;

    z-index: 1;

    background: #009933;

    text-align: center;

}

</style>

</head>

<body>

    <div>

        <table border="1">

            <tr>

                <td class="fixedtd">固定表头第一列</td>

                <td class="fixedtd">固定表头第二列</td>

                <td class="fixedtd">固定表头第三列</td>

                <td class="fixedtd">固定表头第四列</td>

                <td class="fixedtd">固定表头第五列</td>

                <td class="fixedtd">固定表头第六列</td>

            </tr>

            <tr>

                <td>A1</td>

                <td>A2</td>

                <td>A3</td>

                <td>A4</td>

                <td>A5</td>

                <td>A6</td>

            </tr>

            <tr>

                <td>B1</td>

                <td>B2</td>

                <td>B3</td>

                <td>B4</td>

                <td>B5</td>

                <td>B6</td>

            </tr>

            <tr>

                <td>C1</td>

                <td>C2</td>

                <td>C3</td>

                <td>C4</td>

                <td>C5</td>

                <td>C6</td>

            </tr>

            <tr>

                <td>D1</td>

                <td>D2</td>

                <td>D3</td>

                <td>D4</td>

                <td>D5</td>

                <td>D6</td>

            </tr>

            <tr>

                <td>E1</td>

                <td>E2</td>

                <td>E3</td>

                <td>E4</td>

                <td>E5</td>

                <td>E6</td>

            </tr>

            <tr>

                <td>F1</td>

                <td>F2</td>

                <td>F3</td>

                <td>F4</td>

                <td>F5</td>

                <td>F6</td>

            </tr>

            <tr>

                <td>G1</td>

                <td>G2</td>

                <td>G3</td>

                <td>G4</td>

                <td>G5</td>

                <td>G6</td>

            </tr>

            <tr>

                <td>H1</td>

                <td>H2</td>

                <td>H3</td>

                <td>H4</td>

                <td>H5</td>

                <td>H6</td>

            </tr>

        </table>

    </div>

</body>

</html>

table表头固定的更多相关文章

  1. table表头固定问题

    table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...

  2. HTML table表头固定

    HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...

  3. 纯CSS实现table表头固定（自创备忘）

    因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...

  4. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  5. jQuery,Table表头固定插件chromatable存在的问题及解决办法

    在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

  6. table 表头固定

    <html> <head> <title>Test</title> <style type="text/css"> .d ...

  7. Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决

    原文地址,转载请注明出处:http://www.cnblogs.com/jying/p/6294063.html 做项目的时候发现给 tbody设置 height 和 overflow-y 在IE下不 ...

  8. html5 table的表头固定的HTML代码

    table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

随机推荐

  1. 转: Java安全停止线程方法

    转: http://blog.csdn.net/flyingpig4/article/details/7675557 1.早期Java提供java.lang.Thread类型包含了一些列的方法star ...

  2. shell命令行混合进制计算器smartbc

    需要简单的计算的时候,不想用GUI的计算器,能在shell下直接计算就最好了 查了下,有个东西叫 bc,  具体的使用就不赘述了,可以运行bc,然后进去计算,也可以echo传递过去,大概是像这样 ec ...

  3. 【C++】类内函数与内联函数

    今天本来在休息,结果小伙伴问了我个问题,把我的三观都颠覆了.get到了新的知识点,这里记录一下. 内类的函数,都默认为是内联函数!! 这居然是真的.然后我就懵了.因为内联函数应该是定义在头文件里比较好 ...

  4. 【C++】隐式类型转换和 explicit关键字

    来自:黄邦勇帅 1． 当类中带有一个参数的构造函数时,将执形对象的隐式转换,比如有类 A,有一个带有一个参数的构造函数A(int i){}则当出现语句A m=1;就会调用带有一个参数的构造函数来创建对 ...

  5. Selenium2+python自动化25-js处理日历控件（修改readonly属性）【转载】

    前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...

  6. poj 2398(叉积判断点在线段的哪一侧)

    Toy Storage Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5016   Accepted: 2978 Descr ...

  7. C#给IIS添加禁止IP限制

    /// <summary> /// 给IIS添加禁止IP限制 /// 仅针对iis 7及以上版本 /// 首先需要引入Microsoft.Web.Administration.dll // ...

  8. *****git pull总结

    当git clone之后,直接git pull它会自动匹配一个正确的remote url 是因为在config文件中配置了以下内容: 1 [branch "master"] 2 r ...

  9. POJ 1094 Sorting It All Out【拓扑排序 / 比较字母大小】

    Sorting It All Out Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 38100 Accepted: 13453 ...

  10. B - ACM小组的古怪象棋 【地图型BFS+特殊方向】

    ACM小组的Samsara和Staginner对中国象棋特别感兴趣,尤其对马(可能是因为这个棋子的走法比较多吧)的使用进行深入研究.今天他们又在 构思一个古怪的棋局:假如Samsara只有一个马了,而 ...