表格头行固定:使用CSS实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格头行固定:使用CSS实现</title>
<style type="text/css" >
div.DivContainer /* Div */{
overflow: scroll;
border: solid 1px gray;
}
table {
border-collapse: collapse;
border:solid 1px gray;
}
td {
position: relative;
padding: 5px;
border-top: solid 0px gray;
border-bottom: solid 1px gray;
border-left: solid 0px gray;
border-right: solid 1px gray;
}
td.HLocked /*左侧冻结的列*/ {
z-index: 10;
position: relative;
left: expression(document.getElementById("div").scrollLeft);
text-align: center;
BORDER-RIGHT: #555 1px solid;
BORDER-TOP: #fff 1px solid;
BORDER-BOTTOM: #555 1px solid;
BORDER-LEFT: #fff 1px solid;
padding:2 1 2 2;
BACKGROUND: #ccc;
}
td.VLocked /*垂直固定的表头*/ {
z-index: 20;
position: relative;
top: expression(document.getElementById("div").scrollTop);
color: black;
text-align: center;
BORDER-RIGHT: #555 1px solid;
BORDER-TOP: #fff 1px solid;
BORDER-BOTTOM: #555 1px solid;
BORDER-LEFT: #fff 1px solid;
padding:2 1 2 2;
BACKGROUND: #ccc;
}
td.Locked /*垂直、水平都固定的表头*/ {
z-index: 30;
position: relative;
top: expression(document.getElementById("div").scrollTop);
left: expression(document.getElementById("div").scrollLeft);
color: black;
text-align: center;
BORDER-RIGHT: #555 1px solid;
BORDER-TOP: #fff 1px solid;
BORDER-BOTTOM: #555
相关文档:
Css中的条件样式表
<!--[if lte IE 6 ]>
<link rel="stylesheet" href="ie6.css" mce_href="ie6.css" media="all"
type="text/css"/>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" mce_href="ie7.css" media="all"
type="text/css"/>
<![en ......
当连续输入英语字符后,由于浏览器默认为一个单词,并不会换行处理,在IE6/IE7 中,我们可以添加css中的word-wrap 属性,实现自动换行。但是在IE8 版本中,该属性不支持。
我们可以采用判断浏览器版本后,使用JavaScript进行换行。
if ($.br ......
第一种,是CSS HACK的方法
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于CSS HACK,不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
......
<html>
<body style="margin:0;">
<div>
<table style="width:100%;height:100%" cellpadding='0' cellspacing='0'>
<tr>
<td style="width:120px;background-color:Red">
  ......
今天遇到要做CSS实现菜单圆角背景的效果, 所以在网上搜了一下,发现此方法最简单可行~~特记录下来供大家一起使用~~~
.nav ul li a{float:left; display:block; padding: 0 10px;
} /*注意padding*/
.nav ul li a:hover{padding:0 0 0 10px;
display:block; background:url(images/tableft1.jpg) left top no-repeat # ......