• 功能描述：

　　　　在一个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. PHP之-json转数组，支持多层嵌套json

    function json_to_array($str) { if (is_string($str)) $str = json_decode($str); $arr=array(); foreach( ...

  2. Jquery控制点击时一、二级菜单自由隐藏与出现

    一.基本HTML和CSS HTML中产生一.二级导航的代码: {loop $nav $key $value} <div class=”u_con”> <span class=” xg ...

  3. Android系统移植(一)-让android系统在目标平台上运行起来

    编号),文件系统采用ubifs格式,控制台设备为ttyS1,波特率为115200 启动的第一个应用程序是/init (6)确保控制台的设置和硬件保持一致,如:硬件上串口用的是UART1,则内核启动参数 ...

  4. centos 6.4 x64安装bugfree

    第一步:下载xampp-linux-1.8.1.tar.gz [root@SVNMANAGER ~]# tar -zxvf xampp-linux-1.8.1.tar.gz -C /opt [root ...

  5. Liferay的架构:缓存（第一部分）

    这次,我将要涉及到一个非常重要的概念:缓存.在当今的web应用中,如果没有设计一个比较好的缓存系统,在web中就不可能有一个良好的性能.所以我将要 提到的缓存不仅仅能够更好地理解Liferay架构,而 ...

  6. Unity3D 浏览工具

    键盘控制: 1.键盘箭头:先选中场景激活场景 按箭头前后左右  shift +箭头 加速移动 2.使物体成为场景焦点:左侧层次视图列表选中物体,移动鼠标指针到场景视图上 按F,选中物体成为场景视图中心 ...

  7. 图片，音频资源预加载和文档dom加载

    在项目中遇到一个问题,ajax请求音频资源,然后动态的插入到文档中,其中.原生的音频外观实在太丑了,而且每个浏览器的样式都不一样,采取了一个audio插件. 就遇到一个问题,请求后的直接调用插件的话, ...

  8. 【LeetCode】31. Next Permutation

    Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...

  9. 本地存储 cookie,session,localstorage( 二)angular-local-storage

    原文:https://github.com/grevory/angular-local-storage#api-documentation Get Started (1)Bower: $ bower ...

  10. win7、win8.1淡绿色护眼模式设置

    Win7设置: 右击桌面 -> 个性化 -> 窗口颜色 -> 高级外观设置 选中 -> 项目:窗口     颜色:其他 修改:色调  饱和度 亮度 红  绿  蓝 添加到自定义 ...