• 功能描述：

　　　　在一个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. 开源 免费 java CMS - FreeCMS1.4-功能说明-站点管理

    下载地址:http://code.google.com/p/freecms/ 站点管理 FreeCMS支持网站群模式,并支持无限树级管理. 1.  添加一级站点 从左侧管理菜单点击站点管理进入. 提示 ...

  2. .NET基础——ASSCII码表

    char类型不能直接强转为int32,因为强转后的结果是去ascii码表的值.如char 类型的1,强转为int32后的值是49. 要得到正确的结果,现将char类型转换为string类型,再转为in ...

  3. C#中转义字符

    编程中很多细节问题我们都要十分的注意,要不一个小小的字母错误就能引起程序的无法运行. C#中转义字符分2中,一种是\,一种是@. @符号在C#中有两个作用作用1.在字符串的前面加@表示取消字符串中的转 ...

  4. 仿Iconfont-阿里巴巴矢量图标库 搜索动画

    效果图如下 style <Style x:Key="BtnSearch" TargetType="{x:Type Button}"> <Set ...

  5. WebStorm、IntelliJ IDEA、JetBrains、PhpStorm、RubyMine、PyCharm

    JetBrains旗下的产品: IntelliJ IDEA偏重于Java开发,旗舰产品,它可以通过(捆绑的或可下载的)插件的方式提供WebStorm和PhpStorm所有的功能.支持Scala和Gro ...

  6. C基于客户端的通信实例

    运行环境liunx 需求:客户端对服务器发送一个TCP连接,连接成功之后发送数据并接收返回数据 代码如下: #include <sys/socket.h> #include <net ...

  7. JavaScript中String.prototype.replace() 方法的使用

    摘抄于:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace ...

  8. windows 下安装mongodb及其配置环境

    MongoDB的安装很简单,设置好安装路径后,一直Next直到安装结束,最大的坑就是MongoDB服务的安装,下面具体说下MongoDB安装之后的一些配置操作 一.下载 首先到官网(http://ww ...

  9. Android设备标识符的使用

    设备ID(DeviceId) 获取办法 android.telephony.TelephonyManager tm = (android.telephony.TelephonyManager) con ...

  10. CODE[VS]-保留两位小数-浮点数处理-天梯青铜

    题目描述 Description 保留两位小数输出一个浮点数. 输入描述 Input Description 一个浮点数.double范围内 输出描述 Output Description 保留两位小 ...