直觉的感受是修改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. sql server 存储过程和视图的区别

    视图 要把视图看做是一张表,包含了一张表的部分数据或者多个表的综合数据,视图的使用和普通表一样: 视图建立并存储在服务器,有效减少网络数据流量,提高安全性: 视图中不存放数据,数据依然存放在视图引用的 ...

  2. springboot项目没错,但就是报红叉

    1.报错原因: Description Resource Path Location TypeCannot change version of project facet Dynamic Web Mo ...

  3. MySQL区间检索

    在没有前端的情况下,自己写一些搜索逻辑,可能不太完善,不过功能完成了 //区间检索的判定 private String columnTextTranslateRegion(String columnT ...

  4. Driver对 (一对两对的对):specific/mini VS general

    老是听说miniport,port,在这里算是搞清楚了.mini就是specific(特殊)的意思.在微软的驱动层次里面,最底层的一般都是比较特殊的,但是为了满足系统的可拓展.可维护.通用等要求,微软 ...

  5. Spark(二)CentOS7.5之Spark2.3.1HA安装

    一 下载安装包 1 官方下载 官方下载地址:http://spark.apache.org/downloads.html 2  安装前提 Java8  安装成功 zookeeper  安装成功 had ...

  6. APP相关测试工具

    名称 描述   性能检测工具 用于对插件CPU.内存.闪退进行测试   接口测试工具 用于对插件本版本内的接口进行上线前的结构检测 自动比对差异   monkey测试工具 对主软件进行稳定性测试   ...

  7. 冲刺阶段——Day6

    [今日进展] 完成登录代码 userRegister类 import java.awt.*; import java.awt.event.ActionEvent; import java.awt.ev ...

  8. form表单无刷新提交

    Ajax最大的特点就是可以不刷新页面而实现数据的通信及更改页面信息.那么用AJAX进行后台通信传递字符串还是可以的,遇到上传文件该怎么办呢?基于安全考虑,JS是不能直接进行文件操作的,只好用原始的fr ...

  9. SourceTree软件

      A free Git client for Windows and Mac SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端管理工具,同时也是Mer ...

  10. OS X的CAOpenGLLayer中如何启用OpenGL3.2 core profile

    在OS X的openGL编程中,我们有时为了想在自己的OpenGL图层上再加些自己的某些涂层,必须得用CAOpenGLLayer而不是NSOpenGLView,由于在NSOpenGLView上添加任何 ...