代码描述:table 表头固定。table表头固定实例代码
表头固定效果是比较人性化的举措之一,尤其是表格内容较多的时候更为重要,还有一个人性化的举措就是隔行变色,这一点对于对于大数据量的表格也是非常重要的,这样可以增强行的辨识度,下面就是一段这样的代码实例。 代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>51前端</title> <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 } h1{ font:normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif; margin:0 0 5px 0 } h2{ font:normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif; margin:0 0 5px 0 } h3{ font:normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif; color:#008000; margin:0 0 15px 0 } div.tableContainer{ clear:both; border:1px solid #963; height:285px; overflow:auto; width:756px } html>body div.tableContainer{ overflow:hidden; width:756px } div.tableContainer table{ float:left; width:740px } html>body div.tableContainer table{ width:756px } thead.fixedHeader tr{ position:relative } html>body thead.fixedHeader tr{ display:block } 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:left } thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited{ color:#FFF; display:block; text-decoration:none; width:100% } thead.fixedHeader a:hover{ color:#FFF; display:block; text-decoration:underline; width:100% } html>body tbody.scrollContent{ display:block; height:262px; overflow:auto; width:100% } tbody.scrollContent td, tbody.scrollContent tr.normalRow td{ background:#FFF; border-bottom:none; border-left:none; border-right:1px solid #CCC; border-top:1px solid #DDD; padding:2px 3px 3px 4px } tbody.scrollContent tr.alternateRow td{ background:#EEE; border-bottom:none; border-left:none; border-right:1px solid #CCC; border-top:1px solid #DDD; padding:2px 3px 3px 4px } html>body thead.fixedHeader th{ width:200px } html>body thead.fixedHeader th + th{ width:240px } html>body thead.fixedHeader th + th + th{ width:316px } html>body tbody.scrollContent td{ width:200px } html>body tbody.scrollContent td + td{ width:240px } html>body tbody.scrollContent td + td + td{ width: 300px } </style> <script type="text/javascript"> function removeClassName(elem, className){ elem.className=elem.className.replace(className,"").trim(); } function addCSSClass (elem, className){ removeClassName(elem,className); elem.className=(elem.className+ " " + className).trim(); } String.prototype.trim = function(){ return this.replace( /^\\s+|\\s+$/, "" ); } function stripedTable(){ if(document.getElementById && document.getElementsByTagName) { var allTables = document.getElementsByTagName('table'); if(!allTables){ return; } for (var i = 0; i < allTables.length; i++) { if(allTables[i].className.match(/[\\w\\s ]*scrollTable[\\w\\s ]*/)) { var trs = allTables[i].getElementsByTagName("tr"); for (var j = 0; j < trs.length; j++){ removeClassName(trs[j], 'alternateRow'); addCSSClass(trs[j], 'normalRow'); } for(var k = 0; k < trs.length; k += 2){ removeClassName(trs[k], 'normalRow'); addCSSClass(trs[k], 'alternateRow'); } } } } } window.onload=function(){stripedTable();} </script> </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> </tr> </thead> <tbody class="scrollContent"> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>End of Cell Content 1</td> <td>End of Cell Content 2</td> <td>End of Cell Content 3</td> </tr> </tbody> </table> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能