直觉的感受是修改thead与tbody,尝试了以下几种方法,但均告失败。 
1. 将tbody设置为块状元素,然后设置表格的高度与溢出; 
1. 将thead设置为绝对定位,然后设置表格的高度与溢出; 
1. 将表格转换为块状元素,然后把有td都设置为浮动,从而控制高度与溢出;

正确的方法应该将   thead和 tbody都用div装起来:

效果如下图:

  

table固定头部,tbody内容滚动的更多相关文章

  1. table固定头部,表格tbody可上下左右滑动

    当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <div class="table_box_big"> ...

  2. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

  3. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

  4. Css 设置固定表格头部,内容可滚动

      效果图:

  5. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  6. HTML table固定表头

    最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...

  7. Midnight.js – 实现奇妙的固定头部切换效果

    Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...

  8. Bootstrap表格中,thead固定,tbody有垂直滚动条

    1.html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"& ...

  9. 移动端固定头部和固定左边第一列的实现方案(Vue中实现demo)

    最近移动端做一份报表,需要左右滚动时,固定左边部分:上下滚动时,固定头部部分. 代码在Vue中简单实现 主要思路是: a.左边部分滚动,实时修改右边部分的滚动条高度 b.头部和内容部分都设置固定高度, ...

随机推荐

  1. React中生命周期

    1.过时的生命周期(v16.3之前) 1.当前组件初次渲染: 绿色表示执行顺序. constructor(): 如果不需要初始化,可以直接省略,会自动补全该函数. 可以在这个方法中初始化this.st ...

  2. 可以粘贴Word文档中图片的编辑器

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  3. 内存管理2-set方法的内存管理

    1.对象之间的内存管理: 每个学生都有一本书 book类 @price 学生类  @age @book -------------------- #import "book.h" ...

  4. GA算法及参数对结果的影响

    1.遗传算法简介 遗传算法是一种基于自然选择和群体遗传机理的搜索算法,它模拟了自然选择和自然遗传过程中的繁殖.杂交和突变现象.再利用遗传算法求解问题时,问题的每一个可能解都被编码成一个“染色体”,即个 ...

  5. spaCy 第二篇:语言模型

    spaCy处理文本的过程是模块化的,当调用nlp处理文本时,spaCy首先将文本标记化以生成Doc对象,然后,依次在几个不同的组件中处理Doc,这也称为处理管道.语言模型默认的处理管道依次是:tagg ...

  6. IO注意事项

    read()方法返回值为什么是int? 因为字节输入流可以操作任意类型的文件,比如图片音频等,这些文件底层都是以二进制形式的存储的,如果每次读取都返回byte,有可能在读到中间的时候遇到1111111 ...

  7. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_10-webpack研究-安装nodejs

    1.3.2.1 安装Node.js webpack基于node.js运行,首先需要安装node.js. node -v:验证是否安装成功了.

  8. Qt编写安防视频监控系统5-视频回放

    一.前言 一般视频回放都会采用GB28181国标来处理,这样可以保证兼容国内各大厂家的NVR,毕竟在同一的国家标准下,大家都会统一支持国标的,就不需要根据各个厂家的SDK来做兼容处理,烦得很,厂家越来 ...

  9. mysql连接工具记录

    港优: Sequel pro   

  10. failOnMissingWebXml

    使用maven创建项目时有时在pom.xml的war处出现failOnMissingWebXml的错误,根据错误提示的原因可以知道项目是web项目,打包时打成war包. 如果项目里没有web.xml, ...