• 功能描述：

　　　　在一个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. mongDB主从

    MongoDB[第二篇]MongodDB主从 官方网站:http://www.mongodb.org/ MongoDB的一些参数 --logpath 日志文件路径 --master 指定为主机器 -- ...

  2. [置顶] java得到前一个月的年月日时分秒

    import java.util.Calendar; /** * 得到前一个月的年月日时分秒 * @author Mr.hu * 2013-6-28上午12:00:35 * Class Explain ...

  3. [置顶] ROS探索总结（十一）——机器视觉

    机器视觉在计算机时代已经越来越流行,摄像头价格越来越低廉,部分集成深度传感器的混合型传感器也逐渐在研究领域普及,例如微软推出的Kinect,而且与之配套的软件功能十分强大,为开发带来了极大的便利.RO ...

  4. java nio io模型

    I/O模型 在开始NIO的学习之前,先对I/O的模型有一个理解,这对NIO的学习是绝对有好处的.我画一张图,简单表示一下数据从外部磁盘向运行中进程的内存区域移动的过程: 这张图片明显忽略了很多细节,只 ...

  5. Thymeleaf 笔记

    th:each=”aname : ${namelist}” th:if=”${name} == ‘SERVICED’” 页面使用Map集合 <div th:each="osl : ${ ...

  6. restful Api 风格契约设计器：Swagger-editor和swagger-ui的应用

    swagger-editor的安装 swagger-editor应用的yaml语法,有定义变量和数据结构,不明白可以参考其示例 安装步骤: 下载swagger-editor git地址 运行npm r ...

  7. Python第一天——入门Python(1)数据定义

    数据类型: 什么是数据? 在计算机科学中,数据是指所有能输入到计算机并被计算机程序处理的符号的介质的总称,是用于输入电子计算机进行处理,具有一定意义的数字字母.符号和模拟量等的统称.现在计算机存储和处 ...

  8. [Q]关于不同比例、不同纸张大小图纸的批量打印

    不同比例或不同纸张大小的图纸可以一起批量打印,但目前打图精灵不能自动识别纸张大小,纸张大小是手动指定的,且只能指定一种纸张大小,但设置打印比例为“缩放到可打印区域”或“缩放到纸张边界”仍然可以将不同比 ...

  9. webservices(一)

    ---完全摘自网络 什么是webService WebService,顾名思义就是基于Web的服务.它使用Web(HTTP)方式,接收和响应外部系统的某种请求.从而实现远程调用.  1:从WebSer ...

  10. CODE[VS]-判断浮点数是否相等-浮点数处理-天梯青铜

    题目描述 Description 给出两个浮点数,请你判断这两个浮点数是否相等 输入描述 Input Description 输入仅一行,包含两个浮点数 输出描述 Output Description ...