table表頭固定例項程式碼
表頭固定效果是比較人性化的舉措之一,尤其是表格內容較多的時候更為重要,還有一個人性化的舉措就是隔行變色,這一點對於對於大資料量的表格也是非常重要的,這樣可以增強行的辨識度,下面就是一段這樣的程式碼例項。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</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>
以上程式碼實現了我們想要的效果,不但實現了表格表頭固定效果,也實現了隔行變色效果。
相關文章
- table表頭分組程式碼例項
- table表格美化程式碼例項
- table表格使用程式碼例項
- elementUI table 自定義表頭UI
- js table表格排序程式碼例項JS排序
- table細線表格例項程式碼
- jQuery操作表格table程式碼例項jQuery
- element table 表頭顯示 tooltip
- table表格隔行變色程式碼例項
- CSS空心箭頭程式碼例項CSS
- jQuery table表格隔行換色程式碼例項jQuery
- js table表格操作大全程式碼例項JS
- js table隔行變色效果程式碼例項JS
- 檢索table表格資料程式碼例項
- javascript生成指定行列table表格程式碼例項JavaScript
- javascript動態操作table表格程式碼例項JavaScript
- 三個本地組策略的設定例項
- 刪除table表格行和列程式碼例項
- 獲取table表格有多少列程式碼例項
- table表格單元格合併程式碼例項
- 頑固TABLEのtable-layout/white-space
- javascript新增或者刪除table表格行程式碼例項JavaScript行程
- 動態刪除和新增table行程式碼例項行程
- js迭代table表格的行和列程式碼例項JS
- canvas繪製箭頭效果程式碼例項Canvas
- 更換select箭頭程式碼例項
- canvas繪製熊貓頭像程式碼例項Canvas
- 清空form表單例項程式碼ORM單例
- ElementUI 中 table 表格自定義表頭 Tooltip 文字提示UI
- javascript: 帶分組資料的Table表頭排序JavaScript排序
- 點選左右箭頭可以移動選項例項程式碼
- SQLServer樂觀鎖定和悲觀鎖定例項SQLServer
- Oracle Job 定時執行設定例項[final]Oracle
- 字型圖示固用程式碼
- 直播app原始碼,給elementUI的table表頭新增按鈕或者多選框APP原始碼UI
- 【TABLE】oracle表線上重定義注意事項Oracle
- 【TEMPORARY TABLE】Oracle臨時表使用注意事項Oracle
- 【TABLE】Oracle表資訊收集指令碼Oracle指令碼