文档章节

table 锁定表头

cccyb
 cccyb
发布于 2017/09/12 10:46
字数 525
阅读 6
收藏 0
点赞 0
评论 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

共有 人打赏支持
cccyb
粉丝 31
博文 272
码字总数 22613
作品 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
Element 2.0.0-rc.1 发布,基于 Vue 2.0 的组件库

Element 2.0.0 rc1 已发布,Element 是饿了么开源的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。 新特性 Form 新增 方法,用于...

王练
2017/10/26
911
4
Java解析excel工具easyexcel助你快速简单避免OOM[图]

Java解析excel工具easyexcel助你快速简单避免OOM[图] Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程...

原创小博客
07/19
0
0
JTableHerder的使用

如题。为表格增加一个表头。new一个table之后,必须把这个table放到scrollPanel中才能显示表头。真的很奇怪。swing虽然别扭,但是也不得不用。谁叫我对java熟悉呢?...

崔钢
2011/01/14
160
3
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.3K
10
Bootstrap Table简单例子学习

1、Bootstrap Table简介 Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。 2、所需要的库...

Elven_Xu
2015/12/31
3.5K
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

单身税的时代就要来临,你还没有用Python帮你找一个女朋友吗?

单身税的历史可以追溯到2015年韩国的新政, 低生育率逼得韩国产生了这一政策。 现在我国也要实行这一政策, 很多单身狗就接受不了了 很可惜,国家不包分配对象, 男的都说找对象难, 有没有向...

猫咪编程
16分钟前
0
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
20分钟前
0
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0
Mybaties入门介绍

Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然,目前Mybaties正在慢慢取代Hibernate,这是因为相比较Hibernate而言Mybaties性能更好,响应更快,更加灵活。我们在开...

王子城
昨天
0
0
编程学习笔记之python深入之装饰器案例及说明文档[图]

编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰...

原创小博客
昨天
0
0
流利阅读笔记33-20180722待学习

黑暗中的生物:利用奇技淫巧快活生存 Daniel 2018-07-22 1.今日导读 如果让你在伸手不见五指的黑暗当中生存,你能熬过几天呢?而大千世界,无奇不有。在很多你不知道的角落,有些生物在完全黑...

aibinxiao
昨天
5
0
Hystrix降级逻辑中如何获取触发的异常

通过之前Spring Cloud系列教程中的《Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)》一文,我们已经知道如何通过Hystrix来保护自己的服务不被外部依赖方拖垮的情况。但是实际...

程序猿DD
昨天
0
0
gin endless 热重启

r := gin.New()r.GET("/", func(c *gin.Context) {c.String(200, config.Config.Server.AppId)})s := endless.NewServer(":8080", r)s.BeforeBegin = func(add string) ......

李琼涛
昨天
0
0
JAVA模式之代理模式

平时一直在用spring,spring中最大的特效IOC和AOP,其中AOP使用的就是代理模式.闲着无聊,随手写了一个代理模式,也记录下代理模式的实现Demo. 比如现在有一个场景是:客户想要增加一个新的功能,...

勤奋的蚂蚁
昨天
0
0
ES15-JAVA API 索引管理

1.创建连接 创建连接demo package com.sean.esapi.client;import java.net.InetSocketAddress;import org.elasticsearch.action.get.GetResponse;import org.elasticsearch.clien......

贾峰uk
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部