• 功能描述：

　　　　在一个Table中实现表头固定不动，内容部分实现通过滚动条滚动。

  • 实现效果：

　　　　

　　　　当页面宽度变宽时，只有最后一列的宽度会改变。

　　　　

　　　　

  • 逻辑实现：

　　　　1、将表头和内容分别使用两个table标签包裹，每一个table使用div包裹，并设置不同的样式。

　　　　2、除了最后一列外，每一列的tr和td中都包含一个div，在div内输入显示的信息，并设置样式。

  • 具体实现：

　　　　

　　　　

　　　　

在Table的Tbody中实现滚动条滚动的更多相关文章

  1. table下tbody滚动条与thead对齐的方法且每一列可以不均等

    1 前言 table下tbody滚动条与thead对齐的方法,开始在tbody的td和thead的tr>td,对每一个Item加入百分比,结果是没对齐.也尝试了用bootstrap的col-md ...

  2. CSS 设置table下tbody滚动条

    table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:tabl ...

  3. table给tbody设置滚动条

    table结构例子: <table class="layui-table"> <thead> <tr> <th> 贷款项目 < ...

  4. CSS设置table下tbody滚动条与thead对齐的方法

    <style>table tbody {display:block;height:195px;overflow-y:scroll;} table thead, tbody tr {disp ...

  5. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  6. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  7. Javascript禁止父元素滚动条滚动， pc、移动端均有效

    在网页中经常会遇到这样的场景, 网页比较长有滚动条, 然后网页内的某个内容块里面的内容也比较长, 也具有滚动条.当鼠标移到内容块中使用滚动条来滚动查看内容到达底部或头部的时候,父元素的滚动条也就开始滚 ...

  8. WM_SYSCOMMAND包括很多功能，比如：拖动左边框、拖动标题栏、滚动条滚动、点击最小化、双击标题栏——Delphi 通过事件代替了大部分常用的消息，所以Delphi 简单、易用、高效

    procedure TForm1.WMSysCommand(var Message: TWMSysCommand); var str: string; begin case Message.CmdTy ...

  9. 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

随机推荐

  1. Js继承小结

    Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...

  2. NSLocalizedString不起作用

    程序TESTAPP 环境:XCODE 4.6 OSX  10.8.4 MAC BOOK AIR 2011年版 代码 [doneButton setTitle:NSLocalizedString(@&q ...

  3. [置顶] 使用sping AOP 操作日志管理

    记录后台操作人员的登陆.退出.进入了哪个界面.增加.删除.修改等操作 在数据库中建立一张SYSLOG表,使用Sping 的AOP实现日志管理,在Sping.xml中配置 <!-- Spring ...

  4. MongoDB应用案例：使用 MongoDB 存储日志数据

    线上运行的服务会产生大量的运行及访问日志,日志里会包含一些错误.警告.及用户行为等信息,通常服务会以文本的形式记录日志信息,这样可读性强,方便于日常定位问题,但当产生大量的日志之后,要想从大量日志里挖 ...

  5. webStorm支持.wxml文件高亮显示

    微信小程序官方说明需要在微信开发者工具中开发运行,但这个工具着实不咋地. 我是使用webstrom编辑,然后在微信开发者工具中热加载查看效果,因为webstrom默认并不支持*.wxml,添加使用xm ...

  6. C语言中的位运算的技巧

    一.位运算实例 1.用一个表达式,判断一个数X是否是2的N次方(2,4,8,16.....),不可用循环语句. X:2,4,8,16转化成二进制是10,100,1000,10000.如果减1则变成01 ...

  7. 2014蓝桥杯问题 C: 神奇算式

    没做完,先搞答题了 #include <stdio.h> #include<string.h> #include<stdlib.h> int comp(const ...

  8. 移动web开发学习笔记一

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&quo ...

  9. CODE[VS]-最小数和最大数-整数处理-天梯青铜

    题目描述 Description 输入n个数,n<=100,找到其中最小的数和最大的数 输入描述 Input Description 第一行一个整数n 接下来一行n个整数,每个整数不超过231 ...

  10. Html5NodeJs安装less之千辛万苦CMD系列

    如题,这个东西很是费了一般脑筋 上一次讲了如何在浏览器端解析less文件,这次是在cmd中使用npm中的less模块来解析 详解如下 首下我们去下载一个NodeJs,   我下载的是4.44版本,一路 ...