table fix head body scroll
摘自www
sample1:
<html> <head> <style> body { background-color: #F0F0F0 ; font: 11px "verdana","Arial"; width:90%; margin-left:auto; margin-right:auto; } .tScroll { border: 1px #7494BF solid; background-color: #ffffff; overflow: scroll; overflow-x:hidden; height:100px; cursor: default; } tr.tableHead { position:relative; background-color:#BFCEE7; height: 16px; text-align: center; } td { font: 11px "Verdana", "Arial"; } td.asBtn{ border: #7494BF solid; border-width: 0px 1px 1px 0px; } table { border:0px; width:100%; } </style> </head> <body> <div class="tScroll" id="tC"> <table cellspacing="0" cellpadding="0"> <tr class="tableHead" onselectstart="return false" style="top:expression(document.getElementById ('tC').scrollTop)"> <td class="asBtn">heading1</td> <td class="asBtn">heading2</td><td class="asBtn">heading3</td> <td class="asBtn">heading4</td><td class="asBtn">heading5</td> <td class="asBtn">heading6</td> </tr> <tr><td>cell1</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> </table> </div> </body> </html>
sample2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> </head> <body> <table bgcolor="#339900" style="width: 100%"> <tr> <td style="height: 74px"> <div style="width: 100%; height: 25px; background-color: #ffccff;"> <table cellspacing="0"> <tr> <td style =" width: 50px;" bgcolor="#ff9966"> c1</td> <td style =" width: 50px;" bgcolor="#ff9966"> c2 </td> <td style =" width: 50px;" bgcolor="#ff9966"> c3 </td> <td style =" width: 50px;" bgcolor="#ff9966"> c4 </td> <td style =" width:expression((this.parentElement.parentElement.offsetWidth -50-50-50-50)+'px');" bgcolor="#ff9966"> c5 </td> </tr> </table> <div style="width: 100%; height: 133px;overflow-y :scroll ; background-color: #ccff66;"> <table cellspacing="0"> <tr> <td style =" width: 50px;" > 1</td> <td style =" width: 50px;" > 12</td> <td style =" width: 50px;" > 13</td> <td style =" width: 50px;" > 14</td> <td style =" width:expression((this.parentElement.parentElement.offsetWidth -50-50-50-50)+'px');" > 15</td> </tr> <tr> <td>2</td> <td> </td> <td> </td> <td> </td> <td></td> </tr> <tr> <td>3</td> <td></td> <td></td> <td> </td> <td></td> </tr> <tr> <td>4</td> <td></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>5</td> <td></td> <td> </td> <td></td> <td></td> </tr> <tr> <td> 6</td> <td> </td> <td></td> <td> </td> <td></td> </tr> <tr> <td>7</td> <td> </td> <td> </td> <td></td> <td></td> </tr> <tr> <td>8</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> 9</td> <td> </td> <td> </td> <td></td> <td></td> </tr> </table> </div> </div> </td> </tr> <tr> <td style="height: 52px;"> </td> </tr> </table> </body> </html>
sample3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Test</title> <style type="text/css"> /* 疯子阿飞的样式 */ table.fixtable thead tr{background:#EEE;} div.thead{overflow:hidden;} div.tbody{width:200px;height:100px;overflow-y:auto;} </style> </head> <body> <table width="100%" border="1"> <tr> <td width=50%> <!-- 疯子阿飞的HTML --> <div id=d1 class="tbody"> <table id=t1 class="fixtable"> <thead id=th1> <tr><td colspan="2">Idddd</td></tr> <tr><td rowspan="2">Idddd</td><td>Name</td></tr> <tr><td>Name</td></tr> </thead> <tbody> <tr><td>1</td><td>Mic</td></tr> <tr><td>2</td><td>Mic</td></tr> <tr><td>3</td><td>Mic</td></tr> <tr><td>4</td><td>Mic</td></tr> <tr><td>5</td><td>Mic</td></tr> </tbody> </table> </div> </td> </tr> </table> </body> <script language="javascript"> var tHeadHeight = document.all["th1"].offsetHeight; var divTbody=document.all["d1"]; var divThead=document.createElement("<div class='thead'></div>"); //把存放头部的DIV加到存放主体的DIV(最初的DIV)的前面 divTbody.parentNode.insertBefore(divThead, divTbody); //存放头部的DIV高度为表头高度 divThead.style.height = tHeadHeight; //存放头部的DIV内容与最初的DIV的内容一样 divThead.innerHTML = divTbody.innerHTML; //存放主体的表格顶端为负数,让人看不到表头 document.all["t1"][1].style.marginTop = -tHeadHeight; //存放头部的DIV宽度与最初的DIV宽度一样 divThead.style.width = divTbody.offsetWidth; </script> </html>
sample4:
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <style type="text/css"> <!-- div.tableContainer { clear: both; border: 1px solid #963; height: 285px; overflow: auto; width: 100%; } thead.fixedHeader tr { position: relative; top: expression(document.getElementById("tableContainer").scrollTop) } --> </style> </head> <body> <div id="tableContainer" class="tableContainer" style="height: 237px; width: 66%;" > <table class="scrollTable" style="width: 586px" > <thead class="fixedHeader" > <tr> <th bgcolor="#33cc33"> ID</th> <th bgcolor="#33cc33"> Name</th> <th style="width: 91px" bgcolor="#33cc33"> Age</th> </tr> </thead> <tbody class="scrollContent" > <tr> <td> 1232</td> <td> John</td> <td style="width: 91px"> 10</td> </tr> <tr> <td> 2231</td> <td> Bob</td> <td style="width: 91px;"> 20</td> </tr> <tr> <td style="height: 21px"> 4222</td> <td style="height: 21px"> Sam</td> <td style="width: 91px; height: 21px;"> 30</td> </tr> <tr> <td> 4343</td> <td> Kobe</td> <td style="width: 91px"> 40</td> </tr> <tr> <td> 4432</td> <td> Tank</td> <td style="width: 91px;"> 50</td> </tr> <tr> <td> 7666</td> <td> Mark</td> <td style="width: 91px"> 60</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td style="height: 22px"> 4688</td> <td style="height: 22px"> Rock</td> <td style="width: 91px; height: 22px;"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> <tr> <td> 4688</td> <td> Rock</td> <td style="width: 91px"> 70</td> </tr> </tbody> </table> </div> </body> </html>
sample5:
<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%; } /* 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 } /* 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) } /* 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% } /* 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 } --> </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 style="height: 20px"> And Repeat 1</td> <td style="height: 20px"> And Repeat 2</td> <td style="height: 20px"> And Repeat 3</td> <td style="height: 20px"> And Repeat 4</td> <td style="height: 20px"> And Repeat 5</td> <td style="height: 20px"> And Repeat 6</td> <td style="height: 20px"> And Repeat 7</td> </tr> <tr> <td style="height: 20px"> And Repeat 1</td> <td style="height: 20px"> And Repeat 2</td> <td style="height: 20px"> And Repeat 3</td> <td style="height: 20px"> And Repeat 4</td> <td style="height: 20px"> And Repeat 5</td> <td style="height: 20px"> And Repeat 6</td> <td style="height: 20px"> 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>