html table 标题不滚动

gundumw100

浏览: 5819428 次
性别:
来自: 上海

最近访客更多访客>>

李大喵和李小喵

hjg8858

henseycai

beishen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript+css+html

HTML IE Opera CSS UP

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  
<style type="text/css">  
<!--  
body {  
background: #FFF;  
color: #000;  
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;  
margin: 10px;  
padding: 0  
}  

table, td, a {  
color: #000;  
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif  
}  

.td  
{  
nowrap:’’true’’;  
}  

div.tableContainer {  
clear: both;  
border: 1px solid #963;  
height: 285px;  
overflow: auto;  
width: 100%;  
}  

/* WinIE 6.x needs to re-account for it’’s scrollbar. Give it some padding */  
\html div.tableContainer/* */ {  
padding: 0 16px 0 0  
}  

/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */  
html>body div.tableContainer {  
height: auto;  
padding: 0;  
width: 740px  
}  

/* Reset overflow value to hidden for all non-IE browsers. */  
/* Filter out Opera 5.x/6.x and MacIE 5.x */  
head:first-child+body div[class].tableContainer {  
height: 285px;  
overflow: hidden;  
width: 756px  
}  

/* define width of table. IE browsers only */  
/* if width is set to 100%, you can remove the width */  
/* property from div.tableContainer and have the div scale */  
div.tableContainer table {  
float: left;  
width: 100%  
}  

/* WinIE 6.x needs to re-account for padding. Give it a negative margin */  
\html div.tableContainer table/* */ {  
margin: 0 -16px 0 0  
}  

/* define width of table. Opera 5.x/6.x and MacIE 5.x */  
html>body div.tableContainer table {  
float: none;  
margin: 0;  
width: 740px  
}  

/* define width of table. Add 16px to width for scrollbar. */  
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */  
head:first-child+body div[class].tableContainer table {  
width: 756px  
}  

/* set table header to a fixed position. WinIE 6.x only */  
/* In WinIE 6.x, any element with a position property set to relative and is a child of */  
/* an element that has an overflow property set, the relative value translates into fixed. */  
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */  
thead.fixedHeader tr {  
position: relative;  
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */  
top: expression(document.getElementById("tableContainer").scrollTop)  
}  
thead.fixedHeader2 tr {  
position: relative;  
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */  
bottom: expression(document.getElementById("tableContainer").scrollHeight > document.getElementById("tableContainer").clientHeight ? document.getElementById("tableContainer").scrollHeight - document.getElementById("tableContainer").scrollTop - document.getElementById("tableContainer").clientHeight :0)  
}  

/* set THEAD element to have block level attributes. All other non-IE browsers */  
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */  
/* Filter out Opera 5.x/6.x and MacIE 5.x */  
head:first-child+body thead[class].fixedHeader tr {  
display: block  
}  

/* make the TH elements pretty */  
thead.fixedHeader th {  
background: #C96;  
border-left: 1px solid #EB8;  
border-right: 1px solid #B74;  
border-top: 1px solid #EB8;  
font-weight: normal;  
padding: 4px 3px;  
text-align: center  
}  
/* make the TH elements pretty */  
thead.fixedHeader2 th {  
background: #C96;  
border-left: 1px solid #EB8;  
border-right: 1px solid #B74;  
border-top: 1px solid #EB8;  
font-weight: normal;  
padding: 4px 3px;  
text-align: left  
}  
/* make the A elements pretty. makes for nice clickable headers */  
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {  
color: #FFF;  
display: block;  
text-decoration: none;  
width: 100%  
}  
thead.fixedHeader2 a, thead.fixedHeader2 a:link, thead.fixedHeader a:visited {  
color: #FFF;  
display: block;  
text-decoration: none;  
width: 100%  
}  

/* make the A elements pretty. makes for nice clickable headers */  
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */  
thead.fixedHeader a:hover {  
color: #FFF;  
display: block;  
text-decoration: underline;  
width: 100%  
}  

/* define the table content to be scrollable */  
/* set TBODY element to have block level attributes. All other non-IE browsers */  
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */  
/* induced side effect is that child TDs no longer accept width: auto */  
/* Filter out Opera 5.x/6.x and MacIE 5.x */  
head:first-child+body tbody[class].scrollContent {  
display: block;  
height: 262px;  
overflow: auto;  
width: 100%  
}  

/* make TD elements pretty. Provide alternating classes for striping the table */  
/* http://www.alistapart.com/articles/zebratables/ */  
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {  
background: #FFF;  
border-bottom: 1px solid #EEE;  
border-left: 1px solid #EEE;  
border-right: 1px solid #AAA;  
border-top: 1px solid #AAA;  
padding: 2px 3px  
}  

tbody.scrollContent tr.alternateRow td {  
background: #EEE;  
border-bottom: 1px solid #EEE;  
border-left: 1px solid #EEE;  
border-right: 1px solid #AAA;  
border-top: 1px solid #AAA;  
padding: 2px 3px  
}  

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */  
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */  
/* Add 16px to last TH for scrollbar padding */  
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */  
head:first-child+body thead[class].fixedHeader th {  
width: 200px  
}  

head:first-child+body thead[class].fixedHeader th + th {  
width: 250px  
}  

head:first-child+body thead[class].fixedHeader th + th + th {  
border-right: none;  
padding: 4px 4px 4px 3px;  
width: 316px  
}  

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */  
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */  
/* Add 16px to last TH for scrollbar padding */  
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */  
head:first-child+body tbody[class].scrollContent td {  
width: 200px  
}  

head:first-child+body tbody[class].scrollContent td + td {  
width: 250px  
}  

head:first-child+body tbody[class].scrollContent td + td + td {  
border-right: none;  
padding: 2px 4px 2px 3px;  
width: 300px  

/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */  
top: expression(document.getElementById("tableContainer").scrollTop)  
}  
-->  
</style>  
</head><body>  
 <script>
   function test() {
    var cH = document.getElementById("tableContainer").clientHeight;
    var sH = document.getElementById("tableContainer").scrollHeight;
    var sT = document.getElementById("tableContainer").scrollTop;
    alert(cH+":"+sH+":"+sT);
   }
  </script>
<div id="tableContainer" class="tableContainer">  
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">  
<thead class="fixedHeader">  
<tr>  
<th><a href="#" onclick="javascript:test();">Header 1</a></th>  
<th><a href="#">Header 2</a></th>  
<th><a href="#">Header 3</a></th>  
<th><a href="#">Header 4</a></th>  
</tr>  
</thead>  
<tbody class="scrollContent">  
<tr>  
<td>Cell Content 1</td>  
<td>Cell Content 2</td>  
<td>Cell Content 3</td>  
<td>Cell Content 4</td>  
 
</tr>  
<tr>  
<td>More Cell Content 1</td>  
<td>More Cell Content 2</td>  
<td>More Cell Content 3</td>  
<td>More Cell Content 4</td>  
</tr>  
<tr>  
<td nowrap>Even More Cell Content 1</td>  
<td nowrap>Even More Cell Content 2</td>  
<td nowrap>Even More Cell Content 3</td>  
<td nowrap>Even More Cell Content 4</td>  
</tr>  

<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr> 
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr> 
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr> 
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr> 
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>最后 7</td>  
</tr>  

</tbody>  

<thead class="fixedHeader2">  
<tr>  
<th><a href="#">合计:</a></th>  
<th colspan=6><a href="#">10000</a></th>  
</tr>  
</thead>  

</table>  
</div>  

</body></html>

分享到：

jquery操作select | javascript调试工具：Blackbird

2009-12-07 16:18
浏览 3800
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

html table 标题不滚动

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

html table 标题 不滚动

评论

发表评论

相关推荐

插入google地图

网页插入PDF

弹出层（Div）屏蔽父窗口并且让父窗口变暗

高效判断星期几的 javascript代码

Meta 标签使用详解

去掉图片超级链接上的虚线框

Javascript与CSS在IE和Firefox中的误区及区别

100个很有用的JavaScript函数

几个不常用但很有用的javascript方法

CSS中的一些小技巧

如何让一个iframe 背景透明？

判断文本框还剩多少字符可以输入

关键字高亮显示

在javascript中获取中英文字符长度的问题

验证用户名是否符合长度要求

在你的网页中插入天气预报

JSTL之<c:forEach>

<logic:iterate>同for循环的用法比较

关闭时才执行的javasciprt

div + css命名规则

最近访客更多访客>>

html table 标题不滚动