前幾天，部門的老大叫我解決項目的兩個歷史遺留功能點，其中一個就是要實現表頭固定，橫縱向滾動無影響
實現點：建立一個表格，滾動的時候表頭始終顯示在可視區域的上方，橫向滾動時正常
難點1--要讓表格在縱向滾動的時候不隨滾動條滾動
難點2--要讓表格在橫向滾動的時候正常滾動
只是難點1的話其實有很多個解決方案，這里暫列兩個，第2個可解決難點1和難點2
第一個解決方案，使用兩個table，表頭單獨做一個table，內容做一個，這里因為
滾動條的原因會讓table的寬度變窄造成偏移，我這里使用js去監控調整，下面直接附代碼段：(為了顯示方便，內嵌CSS樣式)
遇到的問題：難點二，表頭無法同步橫向滾動，這里應該可以用js去控制，我選擇的是第二種方案暫時不處理
js：
<script>
var scrollbarWidth = $('#table-maxHeight')[0].offsetWidth - $('#table-maxHeight')[0].scrollWidth;
$("#table-th").css("paddingRight",scrollbarWidth);
</script>
html：
<table id="table-th"> <tr> <th style="width:200px">表頭1</th> <th style="width:200px">表頭2</th> <th style="width:200px">表頭3</th> <th style="width:200px">表頭4</th> <th style="width:200px">表頭5</th> <th style="width:200px">表頭6</th> <th style="width:200px">表頭7</th> <th style="width:200px">表頭8</th> </tr> </table> <div style="height:200px;overflow-y:auto" id="table-maxHeight"> <table style="text-align:center;line-height:3em"> <tr> <td style="width:200px">內容1</th> <td style="width:200px">內容2</th> <td style="width:200px">內容3</th> <td style="width:200px">內容4</th> <td style="width:200px">內容5</th> <td style="width:200px">內容6</th> <td style="width:200px">內容7</th> <td style="width:200px">內容8</th> </tr> <tr> <td style="width:200px">內容1</th> <td style="width:200px">內容2</th> <td style="width:200px">內容3</th> <td style="width:200px">內容4</th> <td style="width:200px">內容5</th> <td style="width:200px">內容6</th> <td style="width:200px">內容7</th> <td style="width:200px">內容8</th> </tr> <tr> <td style="width:200px">內容1</th> <td style="width:200px">內容2</th> <td style="width:200px">內容3</th> <td style="width:200px">內容4</th> <td style="width:200px">內容5</th> <td style="width:200px">內容6</th> <td style="width:200px">內容7</th> <td style="width:200px">內容8</th> </tr> <tr> <td style="width:200px">內容1</th> <td style="width:200px">內容2</th> <td style="width:200px">內容3</th> <td style="width:200px">內容4</th> <td style="width:200px">內容5</th> <td style="width:200px">內容6</th> <td style="width:200px">內容7</th> <td style="width:200px">內容8</th> </tr> <tr> <td style="width:200px">內容1</th> <td style="width:200px">內容2</th> <td style="width:200px">內容3</th> <td style="width:200px">內容4</th> <td style="width:200px">內容5</th> <td style="width:200px">內容6</th> <td style="width:200px">內容7</th> <td style="width:200px">內容8</th> </tr> </table> </div>
第二個解決方案（實現），表頭部用絕對定位脫離table文檔流，監聽目標滾動事件，滾動時將scroolTop的值賦給表頭的top屬性即可實現
遇到問題：單元格的內容在表頭脫離文檔流后自動根據內容多少設置寬度造成與表頭不對齊，設置的width無效
解決方案：通過在單元格中插入div設置與表頭一樣的寬度從而將td撐起來，
*展示案例沒有寫入
style：
<style type="text/css"> #scrool{width:1000px;height:300px;margin:auto;overflow:auto;position:relative} .position_th{background-color:gray;position:absolute;top:0} table{width:2000px;} td{width:200px;height:30px;} tr{width:2000px} </style>
js：
<script> $(document).ready(function(){ $("div").scroll(function() { $(".position_th").css({"top":$(this).scrollTop()}) }); }); </script>
html：
<div id="scrool"> <table class="position_table" cellpadding="0" cellspacing="0"> <tr class="position_th"> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> <td>006</td> <td>007</td> <td>008</td> <td>009</td> <td>0010</td> </tr> <tr> <td>內容1</td> <td>內容1</td> <td>內容1</td> <td>內容1</td> <td>內容1</td> <td>內容1</td> <td>內容1</td> <td>內容1</td> <td>內容1</td> <td>內容1</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> <td>內容</td> </tr> </table> </div>
不對之處請指正
個人原創，轉載請注明來源
博客：http://www.cnblogs.com/alex-web/
注：小瘋紙的yy