Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决
原文地址，转载请注明出处：http://www.cnblogs.com/jying/p/6294063.html
做项目的时候发现给 tbody设置 height 和 overflow-y 在IE下不起作用，或者变为每行高度为height的高度了，经查找资料学习，可加入position:absolute 控制（则其父元素需加position:relative）。
相关学习链接：http://jsfiddle.net/nyCKE/272/
一个实例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:100%;">
<table style="table-layout:fixed;width:100%;height:182px;position:relative;">
<thead style="display:table;width:100%;height:32px;background-color:#F9FAFB;">
<tr>
<th style="width:20%;">
<div>
标题1
</div>
</th>
<th style="width:20%;">
<a href="javascript:void(0)" >
标题2
</a>
</th>
<th style="width:20%;">
<a href="javascript:void(0)">
标题3
</a>
</th>
<th style="width:20%;">
<a href="javascript:void(0)">
标题4
</a>
</th>
<th style="width:20%;">
<a href="javascript:void(0)">
标题5
</a>
</th>
</tr>
</thead>
<tbody style="height:150px;width:100%;overflow-y:auto;display:block;position:absolute;text-align: center;">
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
<tr style="width:100%;display: table;" >
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
<td style="width:20%;">1</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
效果如下：
Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决的更多相关文章
- table表头固定问题
table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
- HTML table表头固定
HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- 纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
- table 表头固定
<html> <head> <title>Test</title> <style type="text/css"> .d ...
- table表头固定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- table 表头不动，tbody滚动对齐
http://www.imaputz.com/cssStuff/bigFourVersion.html# https://blog.csdn.net/yiifaa/article/details/52 ...
- Android ScrollView中的组件设置android:layout_height="fill_parent"不起作用的解决办法
例子,在ScrollView下加入的组件,无论如何也不能自动扩展到屏幕高度. 布局文件. [html] <?xml version="1.0" encoding=" ...
随机推荐
- flume用场景及架构原理
Flume是什么 1.flume可以将采集到的数据存储到HDFS上,也可以放在Hbase上. 2.flume就是一个中间插件,他的作用就是屏蔽数据源和数据存储系统的差异.可以在不同的数据源采集数据,因 ...
- css实战——第一天
1. 开发前的准备 1.1配置开发环境 sublime webstorm vscode Hbuilder atom 1.2建立项目文件夹 主页或是首页 index.html d ...
- MySQL 中的三中循环 while loop repeat 的基本用法
-- MySQL中的三中循环 while . loop .repeat 求 1-n 的和 -- 第一种 while 循环 -- 求 1-n 的和 /* while循环语法: while 条件 DO 循 ...
- phpmyadmin无登录表单无法登陆
发现我的博客的phpmyadmin登录过一次成功之后,后面在登录没有登录表单了,查了很多原因,下面的方法亲测可以解决 打开 phpMyAdmin\libraries\plugins\auth\Auth ...
- Python 文件的操作
新建 # ==================新建==================# 新建文件夹,若倒数第二层文件夹不存在则会报错os.mkdir(r"/home/python" ...
- Java Swing类 颜色、按键状态判断例子代码
package rom; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.ActionEvent; ...
- mybatis foreach 循环 list(map)
直接上代码: 整体需求就是: 1.分页对象里面有map map里面又有数组对象 2.分页对象里面有list list里面有map map里面有数组对象. public class Page { pri ...
- TP5中文件的写入路径有的会被自动重定向到首页
TP5中文件的写入路径有的会被自动重定向到public public function export() { $model=model('FanweUser'); $list=$model->w ...
- mybatis关系映射之一对多和多对一
本实例使用用户(User)和博客(Post)的例子做说明: 一个用户可以有多个博客, 一个博客只对应一个用户 一. 例子(本实体采用maven构建): 1. 代码结构图: 2. 数据库: t_user ...
- twisted之Deferred类的分析
@_oldStyle class Deferred: called = False#类变量,在实例中引用时会自动在实例中生成 paused = False _debugInfo = None _sup ...