直觉的感受是修改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. PHPCMS v9插件包整合

    插件包是已经修改好的文件集合,您可以直接将插件包复制到您的网站中. 注意:插件包会替换phpcms中的文件,如果您修改过phpcms中的文件请先备份好旧的文件. 1.下载插件包 2.解压 3.复制里面 ...

  3. vue中修改第三方组件的样式不生效

    问题 在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如 <div class="test"> <el-button>按钮</e ...

  4. pat 甲级 1064 ( Complete Binary Search Tree ) (数据结构)

    1064 Complete Binary Search Tree (30 分) A Binary Search Tree (BST) is recursively defined as a binar ...

  5. docker部署nginx+vue项目

    1.vue项目打包 npm run build 会在项目生成dist文件夹,这个文件夹可以使用nginx或tomcat来发布服务 2.查找nginx基础镜像 可以通过以下网站找到符合自己的基础镜像,我 ...

  6. Python 上下文管理器模块--contextlib

    在 Python 处理文件的时候我们使用 with 关键词来进行文件的资源关闭,但是并不是只有文件操作才能使用 with 语句.今天就让我们一起学习 Python 中的上下文管理 contextlib ...

  7. es搭建过程会存在的问题 针对6.x

    常见的四个基本错误 错误1 can not run elasticsearch as root 解决方案: 因为安全问题elasticsearch 不让用root用户直接运行,所以要创建新用户 第一步 ...

  8. MAC升级Nodejs和Npm到最新版及CNPM使用

    1.MAC升级Nodejs和Npm到最新版 第一步,先查看本机node.js版本: node -v 第二步,清除node.js的cache: sudo npm cache clean -f 第三步,安 ...

  9. arcgis python 删除一个数据库所有数据

    # -*- coding: cp936 -*- import xlrd # must init xlrd import arcpy import os def main(): arcpy.env.wo ...

  10. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_13-删除页面-前端-Api调用

    增加删除链接 <el-button size="small" type="text" @click="del(page.row.pageId)& ...