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=" ...
随机推荐
- CNN卷积层基础：特征提取+卷积核+反向传播
本篇介绍卷积层的线性部分 一.与全连接层相比卷积层有什么优势? 卷积层可以节省参数,因为卷积运算利用了图像的局部相关性——分析出一小片区域的特点,加上Pooling层(汇集.汇聚),从附近的卷积结果中 ...
- Apache服务器下phalcon项目报Mod-Rewrite is not enabled问题
问题如图: 项目已经按照官网的教程修改了.htaccess文件,仍旧报此错误,判断可能是apache未添加mod_rewrite,通过查询资料,经以下两步解决此问题: 1.执行sudo a2enmod ...
- [java] 屏蔽ie浏览器中F1帮助
实现某一功能时需要屏蔽IE浏览器中的F1,F2快捷键. 百度后发现如下代码 var jq$ = jQuery.noConflict(); //防止$符号与其他的冲突 jq$(document).rea ...
- Java 递归详解
递归详解: 1.递归一句话通俗讲就是一个方法自动重复调用自己的过程. 2.因为是重复调用自己了,所以看起来像一个循环,所以为了避免内存溢出系统崩溃,我们需要在方法里加一个返回值判断,用于递归循环的跳出 ...
- iPhone投影
iPhone投影到Mac上面的操作,用QuickTime,选择主菜单的新建屏幕录制,然后点击录制按钮右边的箭头,相机切换到iPhone就可以了. 相关操作参照 https://jingyan.baid ...
- 48.纯 CSS 创作一盘传统蚊香
原文地址:https://segmentfault.com/a/1190000015246974 感想: 都是半圆边框合成的. HTML code: <div class="coil& ...
- 22.纯 CSS 创作出美丽的彩虹条纹文字
原文地址:https://segmentfault.com/a/1190000014858628 感想: 利用四个span的::before 和 ::after创出多个WEB,给其颜色,绝对定位,再利 ...
- 《汇编语言 基于x86处理器》第九章字符串与数组部分的代码
▶ 书中第九章的程序,主要讲了字符串相关的输入.输出,以及冒泡排序.二分搜索 ● 代码,Irvine32 中的字符串库函数代码范例 INCLUDE Irvine32.inc .data str1 BY ...
- IDEA Maven项目 编译的问题
IDEA中,点击项目的maven插件的 compile: 出现: [INFO] ------------------------------------------------------------ ...
- PyCharm 安装使用
服务器激活地址(转载)http://www.cnblogs.com/littlehb/p/7784517.html PyCharm 服务器激活地址: 最近用edu邮箱申请了一个JetBrains针 ...