背景：#EDF0F5 #FAFBE6 #FFF2E2 #FDE6E0 #F3FFE1 #DAFAF3 #EAEAEF 默认  
阅读新闻

固定表头内容滚动表格

[日期：2004-11-01] 来源：网络  作者： [字体：大 中 小]

代码如下，点击查看：

<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) 
} 


/* 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 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% 
} 

/* 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> 
<div id="tableContainer" class="tableContainer"> 
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable"> 
<thead class="fixedHeader"> 
<tr> 
<th><a href="#">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> 
<th><a href="#">Header 5</a></th> 
<th><a href="#">Header 6</a></th> 
<th><a href="#">Header 7</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> 
<td>Cell Content 5</td> 
<td>Cell Content 6</td> 
<td>Cell Content 7</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> 
<td>More Cell Content 5</td> 
<td>More Cell Content 6</td> 
<td>More Cell Content 7</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> 
<td nowrap>Even More Cell Content 5</td> 
<td nowrap>Even More Cell Content 6</td> 
<td nowrap>Even More Cell Content 7</td> 
</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr>
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> <tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> 

<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 
<td>And Repeat 5</td> 
<td>And Repeat 6</td> 
<td>And Repeat 7</td> 
</tr> 
</tbody> 
</table> 
</div> 

</body></html>

来源：http://www.imaputz.com/cssStuff/bulletVersion.html
阅读： 次
录入：木鸟

【 推荐 】 【 打印 】
上一篇：CSS手册简编
下一篇：固定表格的标题列
相关新闻      
本文评论       全部评论
  太谢谢你了   (276537970 ,2007-09-14 )
发表评论


点评： 字数
姓名：

  • 尊重网上道德，遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款