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=" ...
随机推荐
- Python的可迭代对象、迭代器和生成器
可迭代对象(Iterable) 这些可以直接作用于for循环的对象统称为可迭代对象:Iterable. 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.t ...
- jquery事件及插件
jquery事件 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 chan ...
- 调整SQLServer最大服务器内存参数后实例停止且无法启动
很显然问题原因是:限制内存并应用后,SQLServer内存不足自动停止,并且无法正常启动之 解决,以最小模式启动SQLServer实例,修改内存限制 --1.开启一个cmd窗口 窗口1,-f最小模式启 ...
- 超详细Redis数据库入门教程
[本教程目录] 1.redis是什么2.redis的作者何许人也3.谁在使用redis4.学会安装redis5.学会启动redis6.使用redis客户端7.redis数据结构 – 简介8.redis ...
- web app 、native app、hybrid app比较
web app .native app.hybrid app比较 产品新人学习路 关注 2017.06.04 14:52* 字数 1887 阅读 11476评论 1喜欢 15 之前做讨论的时候,提出了 ...
- HDU1847 Good Luck in CET-4 Everybody 博弈 SG函数
题意:给定n张牌,两个人轮流摸牌,每次摸牌张数为2的幂次,问先手胜还是后手胜 n≤1000 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1847 # ...
- 《机器学习实战》Logistic回归
注释:Ng的视频有完整的推到步骤,不过理论和实践还是有很大差别的,代码实现还得完成 1.Logistic回归理论 http://www.cnblogs.com/wjy-lulu/p/7759515.h ...
- 企业项目构建学习（一）maven
<mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...
- django-media隐射
需要再主url.py中设置 from django.urls import include, path from django.conf.urls.static import static from ...
- 重新指派usb转串口模块在linux系统中的设备调用名称
How to remap /dev/ttyUSB* to a specific name to be called by my program. How to map /dev/ttyUSB* to ...