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=" ...
随机推荐
- NameNode配置HA后及其反过程Hive路径不正确的问题解决
在CDH5.7下,配置了NameNode的HA后,Hive无正常查询数据了,但是其他的组件HDFS , HBase ,Spark都正常的.Hive新建表出现如下异常: CREATE TABLE `x_ ...
- 光伏电池测控系统python代码
'''硬件keithley万用表和程控电源visa是VXIplug&play系统联盟制定的一套标准.python实现VISA,形成pyviva模块'''###IV测试系统的部分程序代码 fro ...
- Qt Opengl
目前在Qt5中做Opengl的学习时候,发现gluPerspective函数没有定义. 1: gluPerspective( 45.0, (GLfloat)width/(GLfloat)height, ...
- CS229 6.8 Neurons Networks implements of PCA ZCA and whitening
PCA 给定一组二维数据,每列十一组样本,共45个样本点 -6.7644914e-01 -6.3089308e-01 -4.8915202e-01 ... -4.4722050e-01 -7.4 ...
- CS229 6.7 Neurons Networks whitening
PCA的过程结束后,还有一个与之相关的预处理步骤,白化(whitening) 对于输入数据之间有很强的相关性,所以用于训练数据是有很大冗余的,白化的作用就是降低输入数据的冗余,通过白化可以达到(1)降 ...
- 为什么TCP比UDP可靠真正原因，以及并发编程的基础问题
一 为什么TCP协议比UDP协议传输数据可靠: 我们知道在传输数据的时候,数据是先存在操作系统的缓存中,然后发送给客户端,在客户端也是要经过客户端的操作系统的,因为这个过程涉及到计算机硬件,也就是物 ...
- 关于QT编译错误问题
这里的意思是出现QT编译错误: 1.之前编译没问题,突然就报错了,而且错误根本不知道啥玩意. 2.编译出现不能自动更新,比如更改ui但是编译之后没该改变. ... 解决方法: 1.删除Makefile ...
- I/O多路复用 select poll epoll
I/O多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作. select select最早于1983年出现在4.2BSD中,它通 ...
- openstack provider self-service network subnet 创建
- python学习笔记_week15
note 上节作业问题: 1.css重用 <style> 如果整个页面的宽度 > 900px时: { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </styl ...