直觉的感受是修改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. 003_C/C++笔试题_分享大汇总

    (一)感谢:lhzstudio 01_C++经典面试题全集 50~100道 都附带有参考答案 02_C++开发工程师面试题库 100~150道 03_C++笔试题库之编程.问答题 150~200道 0 ...

  2. ckeditor粘贴word文档图片的思路

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

  3. learning express step(十二)

    learning express view engine function const express = require('express'); const app = express(); app ...

  4. Doki Doki Literature Club ZOJ - 4035

    Doki Doki Literature Club ZOJ - 4035 题解:其实就是简单排序输出就没了. #include <cstdio> #include <cstring& ...

  5. 报错 One or more constraints have not been satisfied.

    常出现在导入已有标签时. 需要在<build/><plugins/>里面追加标签 <plugin> <groupId>org.apache.maven. ...

  6. 普转提——有趣的数，欢乐ABC，打游戏

    有趣的数——构造符合条件的数 给你一个区间,问有多少个数符合每一位中,只有一个数字和其他数字不同,也就是其他数字都相同,有且只有一个异类: 数据范围是1e16: 因为只考虑数量而不用管大小: 只要0到 ...

  7. 转载：OutOfMemoryError系列（2）: GC overhead limit exceeded

    这是本系列的第二篇文章, 相关文章列表: OutOfMemoryError系列(1): Java heap space OutOfMemoryError系列(2): GC overhead limit ...

  8. [java]取当前时间

    /** * Get current date time * * @return */ private static String getCurrTime() { SimpleDateFormat sd ...

  9. 开发软件-IntelliJ IDEA：百科

    ylbtech-开发软件-IntelliJ IDEA:百科 IDEA 全称 IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智 ...

  10. Kali Linux更新5.2.9后 Vmware Workstation无法正常启动

    说明本脚本仅作为学习使用,请勿用于任何商业用途.本文为原创,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 最近更新了Kali后发现一个奇葩的问题,我的虚拟机不能正常使用了.启 ...