文档章节

table 锁定表头

风象南
 风象南
发布于 2017/09/12 10:46
字数 525
阅读 40
收藏 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

下一篇: DDD/CQRS
风象南

风象南

粉丝 113
博文 278
码字总数 65842
作品 1
西安
技术主管
私信 提问
加载中
请先登录后再评论。
html5+iscroll.js 锁定表头和首列(惯性滚动)解决方案

移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件。 iscroll插件下载地址:iscroll5 该功能demo github地址: https://github.com/lyc152/fr...

a410702849
2016/03/13
33
0
css3的transform造成z-index无效, 附我的牛逼解法。

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

noonoo
2014/12/04
1.4K
0
如何在 web 页面中实现类似 excel 固定表头 / 标题行的效果?

1、 如果没有报表工具或者使用的开源报表工具中没有固定表头功能时,可以使用代码开发方式实现,例如可以通过 jQuery 方式实现固定表头效果,实现思路如下: 用 div 替换 table,将要冻结的表...

泡泡糖儿
05/26
6
0
在页面查询时,怎样锁定水平表头和左侧表头??

页面显示查询集合,循环表格table,对表格进行水平和左侧表头锁定

春暖花开-kx
2016/04/11
133
0
Excel 如何锁定表头

Excel如何锁定表头 当一个Excel表格内容过多,我们滑动到底部位置时看不到表头,给数据的输入、修改与读取带来不便,因此我们需要锁定表头。 在顶部可以看见表头。在底部看不见表头 如何锁定...

osc_havqwnro
2019/08/02
2
0

没有更多内容

加载失败,请刷新页面

加载更多

依赖管理(二):第三方组件库在Flutter中要如何管理

前面的文章中,我介绍了Flutter工程的资源管理机制。在Flutter中,资源采用先声明后使用的机制,在pubspec.yaml显示地声明资源路径后,才可以使用。 对于图片,Flutter基于像素密度,设立不同...

拉维
2019/08/15
7
0
宝塔免费版Nginx防火墙插件来啦,wordpress站长建议开启

之前网上有很多的帖子说宝塔隐藏了免费的自带的防火墙工具,一般用户需要去手动设置和开启,不过纯小白操作还是有点儿麻烦,担心搞错或者不会操作,不过近期看到宝塔应用软件商店上架了一款免...

zouaw建站
2019/11/22
9
0
珍藏已久的 OS 学习网站拿出来分享给大家

点击蓝色“Java建设者”关注我哟 加个“星标”,欢迎来撩 这是程序员cxuan的第 14篇原创文章 平常经常看推荐各种资源教程的,感觉有很多文章稂莠不齐,这次我来推荐点硬核的网站,包你有收获...

cxuaner
05/29
0
0
彤哥说netty系列之IO的五种模型

你好,我是彤哥,本篇是netty系列的第二篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 本文将介绍linux中的五种IO模型,同时也会介绍阻塞/非阻塞与同步/异步的区别。 何...

彤哥读源码
2019/11/15
9
0
微信屏蔽推广网址的解决思路,微信域名防封技术的实现过程

为什么很多商家在微信封域名如此严格的情况下,还会挤破头皮去做微信营销和推广呢?因为微信营销推广的效率要高于其他社交平台太多,微信的流量裂变的速度也高于其他社交平台,故大家都蜂拥而...

戚馨逸
24分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部