文档章节

table 锁定表头

风象南
 风象南
发布于 2017/09/12 10:46
字数 525
阅读 8
收藏 0
<!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: 218px;
        }
    </style>
</head>
<body >
    <table class="table">
        <thead class="fixedThead">
            <tr><th>header</th><th>header two</th></tr>
        </thead>
        <tbody class="scrollTbody">
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
        </tbody>
    </table>
</body>
</html>

其他方式:http://www.cnblogs.com/yetbobo/p/5046106.html

点击标题排序:用Javascript进行简单的Table点击排序. http://www.cnblogs.com/robot/archive/2008/04/20/1161801.html

本文转载自:http://www.ablanxue.com/prone_15098_1.html

共有 人打赏支持
风象南
粉丝 38
博文 272
码字总数 22699
作品 1
西安
高级程序员
css3的transform造成z-index无效, 附我的牛逼解法。

我想锁表头及锁定列。昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。 只锁头效果很好,IE11下会小抖,但chrome下很稳定停在那里。后来又加上锁定列,发现列会盖住表头。 百...

noonoo
2014/12/04
0
0
extjs问题-Extjs锁定列和多表头怎么同时使用!

请问Extjs锁定列和多表头怎么同时使用! 目前我有一个做法,就是用两个GridPanel,数据共享一份, 一个把需要锁定的列显示(考虑锁定列数目少的情况),去掉边框frame:false,布局在左边 另一...

doWorld
2011/10/28
3.3K
0
jsp中table固定表头的问题

在网上看到很多table固定表头的思路,但大多都是将表头和内容放在两个table里来处理的,有没有将表头和内容放在一个table里来实现固定表都的方法?

Aaronn
2013/06/13
3.5K
5
Layui 2.1.4 发布,开箱即用的前端 UI 解决方案

为了避免成为版本帝,我决定等 2.2.0 的时候再来这里。本次更新日志如下 优化原始按钮行高偏下问题 优化 table 多级表头并加强,使其真正做到无限级,且功能稳定。见示例 修复 table 如果有一...

贤心
2017/09/15
2.3K
23
如何在Style Report报表工具中绘制具有中国特色的斜表头表格

中国式报表的特点:格式复杂、信息量大 。中国报表基本上都带有格线,因为中国的表头比较复杂,三五层的大格套小格很常见,没有格线容易看走眼。中国式报表的信息量大,各种各样的数据,明细...

敏捷商业智能
2010/08/20
167
0

没有更多内容

加载失败,请刷新页面

加载更多

12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
16分钟前
0
0
JAVA集合之ArrayList

一、前言 Java 集合类提供了一套设计良好的支持对一组对象进行操作的接口和类,JAVA常用的集合接口有4类,分别是: Collection:代表一组对象,每一个对象都是它的子元素 Set:不包含重复元素...

木木匠
37分钟前
1
0
转:XMLHttpRequest2 新技巧

”XMLHttpRequest 的异步调用网上找的例子运行没问题,但稍微改了一点点就报错”InvalidStateError: XMLHttpRequest has an invalid context“。断断续续 搞了3天终于通了,可以接收二进制文...

SamXIAO
56分钟前
2
0
=====D服务器定时任务=====

Linux定时任务 crontab linux系统是有cron这个系统服务来控制的,Liunx系统上包含很多的计划性工作,使用者自己可以设置计划任务,所以linux系统提供了使用者控制计划任务的命令 crontab的启...

覃光林
今天
1
0
xilinx资源

本系列教学视频由赛灵思高级战略应用工程师带领你:从零开始,一步步深入 掌握 HLS 以及 UltraFAST 设计方法,帮助您成为系统设计和算法加速的大拿! http://www.eetrend.com/topics/2018-0...

whoisliang
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部