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=" ...
随机推荐
- arm irq system
http://blog.csdn.net/m_o_bz/article/details/40574713 http://blog.csdn.net/xiafeng1113/article/detail ...
- c#语言函数
class Program {访问修饰符 函数名(参数1,参数2){ 函数体 return 返回值} 无参数,无返回值 public static void abc() ...
- (转)SQL知识_Sql日期时间格式转换
原文地址:http://www.cnblogs.com/Gavinzhao/archive/2009/11/10/1599690.html sql server2000中使用convert来取得dat ...
- opencv 基础数据结构
头文件:cxcore/include/cxtypes.h CvPoint: CvPoint:(构造cvPoint) CvPoint2D32f: CvPoint3D32f: CvSize: CvSize ...
- phalcon7开发环境搭建
1.安装apahce服务器 2.安装mysql 3.安装php7 4.编译和安装phalcon7 git clone --depth=1 git://github.com/dreamsxin/cpha ...
- day7--面向对象进阶(内含反射和item系列)
一面向对象的结构和成员 1.1面向对象的结构 class A: company_name = '老男孩教育' # 静态变量(静态字段) __iphone = '1353333xxxx' # 私有静态变 ...
- SecureCRT连接linux,Hive中无法使用删除键
- error：hadoop 中没有etc目录
download binary 而不是 source http://hadoop.apache.org/#Download+Hadoop
- 《算法》第四章部分程序 part 12
▶ 书中第四章部分程序,包括在加上自己补充的代码,图的几种补充数据结构,包括无向 / 有向符号图,有权边结构,有边权有向图 ● 无向符号图 package package01; import edu. ...
- python中的expandtabs、\t
expandtabs()将tab转换成空格,默认1个tab转成8个空格,\t制表符代表一个tab,我们也可以自定义转换成几个空格 举个例子: 1 a = "hello\tworld" ...