萬盛學電腦網 >> 腳本專題 >> javascript >> HTML+CSS+JS實現完美兼容各大浏覽器的TABLE固定列
HTML+CSS+JS實現完美兼容各大浏覽器的TABLE固定列
HTML+CSS+JS實現完美兼容各大浏覽器的TABLE固定列
本文給大家分享的是使用HTML+CSS+JS實現完美兼容各大浏覽器的TABLE固定列的方法和示例，非常的實用，特別是在BS架構的企業級應用，有需要的小伙伴可以參考下。
BS架構的企業級應用中，當一個表格列數較多時，用戶一個常見的需求就是把前面幾個重要的列固定住，這樣拖動滾動條時固定的列會方便用戶查看數據，用戶體驗很好。一些重量級的JS組件庫也都有這個功能，那麼有沒有更簡單的方法實現這個功能呢？
這個需求常見的解決方案是使用表格拼接的方法，這個方案如果要制作靜態的網頁，或者功能簡單的動態頁面，邏輯比較簡單，技術上也不復雜，很容易實現，但是如果要做成組件，動態功能較多的話，就需要寫大量的冗余代碼，難以維護，甚至於一個簡單的功能，都需要寫很多的代碼，比如事件處理等，這個方法就顯得比較笨拙，靈活性很差，不是一個好的方案。
經過長時間的分析研究，各種場景的試驗，我們找到了一個兼容性非常好的解決方案，總體上來講采用的是定位計算的方法，下面貼出代碼，然後做個解讀。
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script type="text/javascript"> function divScroll(scrollDiv){ var scrollLeft = scrollDiv.scrollLeft; document.getElementById("tableDiv_title").scrollLeft = scrollLeft; document.getElementById("tableDiv_body").scrollLeft = scrollLeft; } function divYScroll(scrollYDiv){ var scrollTop = scrollYDiv.scrollTop; document.getElementById("tableDiv_y").scrollTop = scrollTop; } function onwheel(event){ var evt = event||window.event; var bodyDivY = document.getElementById("tableDiv_y"); var scrollDivY = document.getElementById("scrollDiv_y"); if (bodyDivY.scrollHeight>bodyDivY.offsetHeight){ if (evt.deltaY){ bodyDivY.scrollTop = bodyDivY.scrollTop + evt.deltaY*7; scrollDivY.scrollTop = scrollDivY.scrollTop + evt.deltaY*7; }else{ bodyDivY.scrollTop = bodyDivY.scrollTop - evt.wheelDelta/5; scrollDivY.scrollTop = scrollDivY.scrollTop - evt.wheelDelta/5; } } } </script> <style type="text/css"> body { margin:0; padding:0; } table { border-collapse:collapse; border:0; border:none; } table td { border:1px solid #000; overflow:hidden; padding:0 2px; } </style> </head> <body> <div style="width:500px; position:relative; padding-right:18px;"> <div style="position:relative;height:368px;overflow:hidden;width:100%"> <div style="padding-left:108px; width:auto; overflow:hidden; background:#f00;" id="tableDiv_title" > <table border="0" cellspacing="0" cellpadding="0" > <tr> <td style="min-width:30px; max-width:30px; left:0; top:0; width:30px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">000</td> <td style="min-width:74px; max-width:74px; left:30px; top:0; width:74px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">自動表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最後一列</td> </tr> </table> </div> <div style="overflow:hidden; position:absolute;height:128px; width:100%;" id="tableDiv_y" onmoujavascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved