• 功能描述：

　　　　在一个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. VB.NET调用SQL Sever存储过程

    概要: 本文介绍VB.NET使用创建并调用带有输入参数和输出参数的SQL Sever存储过程 本文代码首先检查要创建的存储过程再数据库中是否存在在.如果不存在,则代码创建一个存储过程,该过程一个参数来 ...

  2. c数据结构学习随笔

    #include <stdio.h> #include <stdlib.h> #include "PublicDS.h" #include<Windo ...

  3. 理解git对象

    1. 首次提交,提交一个简单的文件 a.txt ,commit 之后的图如下:   如图所示,生成了 3 个对象,一个 commit 对象,一个 tree 对象,一个 blob 对象.图上蓝底是 co ...

  4. SSM整合案例（Spring+Struts+Mybatis）

    项目目录结构 第一步:创建数据库和数据表 CREATE DATABASE IF NOT EXISTS mybatis; USE mybatis; CREATE TABLE t_user ( ) NOT ...

  5. DOM节点删除之empty和remove

    DOM节点删除之empty和remove 刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享. .empty()是指对该节点后代的删除,结果是清空该节点(该节点里面已无元素). .remove ...

  6. android浏览器 源码共享

    浏览器源码共享 [天天浏览器]拥有极为精简的内核,手机App大小在2MB以内,是市场上极省用户手机内存,极少占用手机资源,速度极快的浏览器,本身功能完整强大,是极速上网必备的利器. 源代码下载地址:h ...

  7. mac 显示隐藏文件方法

    终端执行命令: 显示:#defaults write com.apple.finder AppleShowAllFiles -bool true隐藏:#defaults write com.apple ...

  8. 竞争激烈的洗衣O2O

    今日,洗衣O2O干洗客宣布已获得千万美金Pre-A轮融资,投资方为新加坡某资本,具体信息尚不便透露. “干洗客”是36氪此前报道过的洗衣O2O服务商,2013年7月诞生于上海,2014年12月经历重组 ...

  9. vue使用resource发送ajax请求

    <script type="text/javascript"> new Vue({ el:'#app', created:function(){ var url=&qu ...

  10. JS返回HTML 传递参数

    var html="<a title=\"Remove\" style='cursor:pointer' cdata='" + id + "' ...